Javascript 反应JS URL更改，但不更改带有BrowserRouter的页面

所以，我知道有很多关于这个的问题，我一直在寻找一个解决方案很长一段时间，但似乎没有什么工作，我几乎是一个初学者在ReactJS

当我点击我的按钮时，URL链接会改变，但页面仍然是一样的。我正在尝试构建一个游戏（实际上是一个测验），它有一些级别，所以组件总是相同的，但数据不同

为了更好地解释：

App.js

import React from 'react';
import './App.css';
import {dataSet1, dataSet2} from './data/dataSet.js'
import Quiz from './Quiz.js'
import {BrowserRouter,Switch,Route, Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';


class App extends React.Component {
  render() {
    var style = {
      width: "25%",
      backgroundColor: "green",
      float: "center",
      padding: "12px 28px",
      textAlign: "center",
      color: "white",
    }

    return(
      <div>
        <BrowserRouter>
          <Button style={style} component={Link} to="/level1">Play</Button>
          <Switch>
            <Route exact path="/level1" component={withRouter(Quiz)}>
              <Quiz level={1} data={dataSet1}/>
            </Route>
            <Route path="/level2" component={withRouter(Quiz)}>
              <Quiz level={2} data={dataSet2}/>
            </Route>
          </Switch>  
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Quiz extends React.Component {
    constructor(props) {
        super(props)

        this.state = {current:0, level: props.level, dataSet:props.data, correct:0, incorrect:0}
        this.handleClick = this.handleClick.bind(this)

    }

    handleClick(choice) {
        if (choice === this.state.dataSet[this.state.current].correct) {
          this.setState({correct: this.state.correct + 1})
        } else {
          this.setState({incorrect: this.state.incorrect + 1})
        }

        if (this.state.current === 4) { 
            if(this.state.correct + this.state.incorrect === 4){ 
                this.setState({current: this.state.current}) 
            }
            else {
                this.setState({current: 0})
                this.setState({incorrect: 0})
                this.setState({correct: 0})
            }
        } else {
             this.setState({current: this.state.current + 1}) 
        }
      }

      render() { 
        var style = {
            width: "25%",
            display: "block",
            backgroundColor: "green",
            textAlign: "center",
            color: "white"
          }
        if(this.state.current === 4 && this.state.correct === 5 ){
            var l = this.state.level + 1
            var next = '/level' + l
            return(
                <div>
                    <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                    <h3 align="left">Passaste de nível!</h3>
                    <Button style={style} component={Link} to={next}>
                        Next Level
                    </Button>
                </div>
            )
        } 
        else {
            return(
                <div>
                  <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                  <QuizArea handleClick={this.handleClick} dataSet={this.state.dataSet[this.state.current]} />
                </div>
              )
        }        
      }
}

....

export default withRouter(Quiz);

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Quiz extends React.Component {
    constructor(props) {
        super(props)

        this.state = {current:0, correct:0, incorrect:0} //removed the unnecessary state 
        this.handleClick = this.handleClick.bind(this)

    }

    handleClick(choice) {
        if (choice === this.props.data[this.state.current].correct) {
          this.setState({correct: this.state.correct + 1})
        } else {
          this.setState({incorrect: this.state.incorrect + 1})
        }

        if (this.state.current === 4) { 
            if(this.state.correct + this.state.incorrect === 4){ 
                this.setState({current: this.state.current}) 
            }
            else {
                this.setState({current: 0})
                this.setState({incorrect: 0})
                this.setState({correct: 0})
            }
        } else {
             this.setState({current: this.state.current + 1}) 
        }
      }

      render() { 
        var style = {
            width: "25%",
            display: "block",
            backgroundColor: "green",
            textAlign: "center",
            color: "white"
          }
        if(this.state.current === 4 && this.state.correct === 5 ){
            var l = this.props.level + 1
            var next = '/level' + l
            return(
                <div>
                    <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                    <h3 align="left">Passaste de nível!</h3>
                    <Button style={style} component={Link} to={next}>
                        Next Level
                    </Button>
                </div>
            )
        } 
        else {
            return(
                <div>
                  <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                  <QuizArea handleClick={this.handleClick} dataSet={this.props.data[this.state.current]} />
                </div>
              )
        }        
      }
}

....

export default withRouter(Quiz);

从“React”导入React；
导入“/App.css”；
从'./data/dataSet.js'导入{dataSet1，dataSet2}
从“./quick.js”导入测验
从“react router dom”导入{BrowserRouter，Switch，Route，Link，withRouter}；
从“@material ui/core/Button”导入按钮；
类应用程序扩展了React.Component{
render（）{
变量样式={
宽度：“25%”，
背景颜色：“绿色”，
浮动：“中心”，
填充：“12px 28px”，
textAlign：“居中”，
颜色：“白色”，
}
返回(
玩
)
}
}
导出默认应用程序；

quick.js

import React from 'react';
import './App.css';
import {dataSet1, dataSet2} from './data/dataSet.js'
import Quiz from './Quiz.js'
import {BrowserRouter,Switch,Route, Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';


class App extends React.Component {
  render() {
    var style = {
      width: "25%",
      backgroundColor: "green",
      float: "center",
      padding: "12px 28px",
      textAlign: "center",
      color: "white",
    }

    return(
      <div>
        <BrowserRouter>
          <Button style={style} component={Link} to="/level1">Play</Button>
          <Switch>
            <Route exact path="/level1" component={withRouter(Quiz)}>
              <Quiz level={1} data={dataSet1}/>
            </Route>
            <Route path="/level2" component={withRouter(Quiz)}>
              <Quiz level={2} data={dataSet2}/>
            </Route>
          </Switch>  
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Quiz extends React.Component {
    constructor(props) {
        super(props)

        this.state = {current:0, level: props.level, dataSet:props.data, correct:0, incorrect:0}
        this.handleClick = this.handleClick.bind(this)

    }

    handleClick(choice) {
        if (choice === this.state.dataSet[this.state.current].correct) {
          this.setState({correct: this.state.correct + 1})
        } else {
          this.setState({incorrect: this.state.incorrect + 1})
        }

        if (this.state.current === 4) { 
            if(this.state.correct + this.state.incorrect === 4){ 
                this.setState({current: this.state.current}) 
            }
            else {
                this.setState({current: 0})
                this.setState({incorrect: 0})
                this.setState({correct: 0})
            }
        } else {
             this.setState({current: this.state.current + 1}) 
        }
      }

      render() { 
        var style = {
            width: "25%",
            display: "block",
            backgroundColor: "green",
            textAlign: "center",
            color: "white"
          }
        if(this.state.current === 4 && this.state.correct === 5 ){
            var l = this.state.level + 1
            var next = '/level' + l
            return(
                <div>
                    <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                    <h3 align="left">Passaste de nível!</h3>
                    <Button style={style} component={Link} to={next}>
                        Next Level
                    </Button>
                </div>
            )
        } 
        else {
            return(
                <div>
                  <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                  <QuizArea handleClick={this.handleClick} dataSet={this.state.dataSet[this.state.current]} />
                </div>
              )
        }        
      }
}

....

export default withRouter(Quiz);

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Quiz extends React.Component {
    constructor(props) {
        super(props)

        this.state = {current:0, correct:0, incorrect:0} //removed the unnecessary state 
        this.handleClick = this.handleClick.bind(this)

    }

    handleClick(choice) {
        if (choice === this.props.data[this.state.current].correct) {
          this.setState({correct: this.state.correct + 1})
        } else {
          this.setState({incorrect: this.state.incorrect + 1})
        }

        if (this.state.current === 4) { 
            if(this.state.correct + this.state.incorrect === 4){ 
                this.setState({current: this.state.current}) 
            }
            else {
                this.setState({current: 0})
                this.setState({incorrect: 0})
                this.setState({correct: 0})
            }
        } else {
             this.setState({current: this.state.current + 1}) 
        }
      }

      render() { 
        var style = {
            width: "25%",
            display: "block",
            backgroundColor: "green",
            textAlign: "center",
            color: "white"
          }
        if(this.state.current === 4 && this.state.correct === 5 ){
            var l = this.props.level + 1
            var next = '/level' + l
            return(
                <div>
                    <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                    <h3 align="left">Passaste de nível!</h3>
                    <Button style={style} component={Link} to={next}>
                        Next Level
                    </Button>
                </div>
            )
        } 
        else {
            return(
                <div>
                  <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                  <QuizArea handleClick={this.handleClick} dataSet={this.props.data[this.state.current]} />
                </div>
              )
        }        
      }
}

....

export default withRouter(Quiz);

从“React”导入React；
从“react router dom”导入{Link，withRouter}；
从“@material ui/core/Button”导入按钮；
类。组件{
建造师（道具）{
超级（道具）
this.state={current:0，level:props.level，dataSet:props.data，correct:0，correct:0}
this.handleClick=this.handleClick.bind（this）
}
handleClick（选择）{
if（choice==this.state.dataSet[this.state.current].correct）{
this.setState（{correct:this.state.correct+1}）
}否则{
this.setState（{error:this.state.error+1}）
}
如果（this.state.current==4）{
如果（this.state.correct+this.state.correct==4）{
this.setState（{current:this.state.current}）
}
否则{
this.setState（{current:0}）
this.setState（{不正确：0}）
this.setState（{correct:0}）
}
}否则{
this.setState（{current:this.state.current+1}）
}
}
render（）{
变量样式={
宽度：“25%”，
显示：“块”，
背景颜色：“绿色”，
textAlign：“居中”，
颜色：“白色”
}
if（this.state.current==4&&this.state.correct==5）{
var l=this.state.level+1
var next='/level'+l
返回(
帕萨斯特·德尼维尔！
下一级
)
} 
否则{
返回(
)
}        
}
}
....
使用路由器导出默认值（测验）；

当我点击“下一级”时，我的URL会更改为，但页面不会更改。尽管如此，如果我刷新页面，它工作得很好，我的页面呈现出它应该呈现的样子。此外，如果我在2级路径中单击“播放”，同样的情况也会发生：URL更改为，但我的页面显示的是2级

恢复：

如果不刷新页面，我无法从level2转到level1或从level1转到level2

---

如果有人能帮助我，那就太好了。

您在这里遇到了两个问题

第一个是你正在把道具放进状态。这通常不是一个好的做法，应该避免，所以你不会遇到像这样的问题。在这种情况下，将

props.level

和

props.data

置于状态是完全没有道理的，因为您根本没有修改它）

第二个原因是路由器智能化，选择不重新安装组件。您没有为您的

路线

组件指定

键

道具，这表明内部的

测验

组件是相同的，因此只需更改道具

谢天谢地，我们只需要解决第一个问题，因为组件不需要重新安装，因为不需要更改任何状态

以下是解决方案： quick.js

import React from 'react';
import './App.css';
import {dataSet1, dataSet2} from './data/dataSet.js'
import Quiz from './Quiz.js'
import {BrowserRouter,Switch,Route, Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';


class App extends React.Component {
  render() {
    var style = {
      width: "25%",
      backgroundColor: "green",
      float: "center",
      padding: "12px 28px",
      textAlign: "center",
      color: "white",
    }

    return(
      <div>
        <BrowserRouter>
          <Button style={style} component={Link} to="/level1">Play</Button>
          <Switch>
            <Route exact path="/level1" component={withRouter(Quiz)}>
              <Quiz level={1} data={dataSet1}/>
            </Route>
            <Route path="/level2" component={withRouter(Quiz)}>
              <Quiz level={2} data={dataSet2}/>
            </Route>
          </Switch>  
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Quiz extends React.Component {
    constructor(props) {
        super(props)

        this.state = {current:0, level: props.level, dataSet:props.data, correct:0, incorrect:0}
        this.handleClick = this.handleClick.bind(this)

    }

    handleClick(choice) {
        if (choice === this.state.dataSet[this.state.current].correct) {
          this.setState({correct: this.state.correct + 1})
        } else {
          this.setState({incorrect: this.state.incorrect + 1})
        }

        if (this.state.current === 4) { 
            if(this.state.correct + this.state.incorrect === 4){ 
                this.setState({current: this.state.current}) 
            }
            else {
                this.setState({current: 0})
                this.setState({incorrect: 0})
                this.setState({correct: 0})
            }
        } else {
             this.setState({current: this.state.current + 1}) 
        }
      }

      render() { 
        var style = {
            width: "25%",
            display: "block",
            backgroundColor: "green",
            textAlign: "center",
            color: "white"
          }
        if(this.state.current === 4 && this.state.correct === 5 ){
            var l = this.state.level + 1
            var next = '/level' + l
            return(
                <div>
                    <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                    <h3 align="left">Passaste de nível!</h3>
                    <Button style={style} component={Link} to={next}>
                        Next Level
                    </Button>
                </div>
            )
        } 
        else {
            return(
                <div>
                  <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                  <QuizArea handleClick={this.handleClick} dataSet={this.state.dataSet[this.state.current]} />
                </div>
              )
        }        
      }
}

....

export default withRouter(Quiz);

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Quiz extends React.Component {
    constructor(props) {
        super(props)

        this.state = {current:0, correct:0, incorrect:0} //removed the unnecessary state 
        this.handleClick = this.handleClick.bind(this)

    }

    handleClick(choice) {
        if (choice === this.props.data[this.state.current].correct) {
          this.setState({correct: this.state.correct + 1})
        } else {
          this.setState({incorrect: this.state.incorrect + 1})
        }

        if (this.state.current === 4) { 
            if(this.state.correct + this.state.incorrect === 4){ 
                this.setState({current: this.state.current}) 
            }
            else {
                this.setState({current: 0})
                this.setState({incorrect: 0})
                this.setState({correct: 0})
            }
        } else {
             this.setState({current: this.state.current + 1}) 
        }
      }

      render() { 
        var style = {
            width: "25%",
            display: "block",
            backgroundColor: "green",
            textAlign: "center",
            color: "white"
          }
        if(this.state.current === 4 && this.state.correct === 5 ){
            var l = this.props.level + 1
            var next = '/level' + l
            return(
                <div>
                    <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                    <h3 align="left">Passaste de nível!</h3>
                    <Button style={style} component={Link} to={next}>
                        Next Level
                    </Button>
                </div>
            )
        } 
        else {
            return(
                <div>
                  <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                  <QuizArea handleClick={this.handleClick} dataSet={this.props.data[this.state.current]} />
                </div>
              )
        }        
      }
}

....

export default withRouter(Quiz);

从“React”导入React；
从“react router dom”导入{Link，withRouter}；
从“@material ui/core/Button”导入按钮；
类。组件{
建造师（道具）{
超级（道具）
this.state={current:0，correct:0，correct:0}//删除了不必要的状态
this.handleClick=this.handleClick.bind（this）
}
handleClick（选择）{
if（choice==this.props.data[this.state.current].correct）{
this.setState（{correct:this.state.correct+1}）
}否则{
this.setState（{error:this.state.error+1}）
}
如果（this.state.current==4）{
如果（this.state.correct+this.state.correct==4）{
this.setState（{current:this.state.current}）
}
否则{
this.setState（{current:0}）
this.setState（{不正确：0}）
this.setState（{correct:0}）
}
}否则{
this.setState（{current:this.state.current+1}）
}
}
render（）{
变量样式={
宽度：“25%”，
显示：“块”，
背景颜色：“绿色”，
textAlign：“居中”，
颜色：“白色”
}
if（this.state.current==4&&this.state.correct==5）{
var l=this.props.level+1
var next='/level'+l
返回(
帕萨斯特·德尼维尔！
下一级