Question

所以，我知道对此有很多疑问，并且我一直在寻找解决方案很长时间，但是似乎没有任何效果，而且我几乎是ReactJS的初学者...

当我单击按钮时，URL链接会更改，但是页面仍然相同。我正在尝试构建一个具有一定级别的游戏（实际上是一个测验），因此组件始终相同，但是数据不同。

为了更好地解释：

App.js

Pushing <packageName> to 'https://www.nuget.org/api/v2/package'...
  PUT https://www.nuget.org/api/v2/package/
  InternalServerError https://www.nuget.org/api/v2/package/ 11190ms
  PUT https://www.nuget.org/api/v2/package/
  InternalServerError https://www.nuget.org/api/v2/package/ 1400ms
  PUT https://www.nuget.org/api/v2/package/
  InternalServerError https://www.nuget.org/api/v2/package/ 1384ms
Response status code does not indicate success: 500 (Internal Server Error).

Quiz.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;

当我单击“下一级”时，我的URL更改为 http://localhost:3000/level2 ，但页面未更改。虽然，如果我刷新页面，它就可以正常工作，并且我的页面将按应有的方式呈现。另外，如果我在第2级路线中单击“播放”，也会发生同样的情况：URL更改为 http://localhost:3000/level1 ，但我的页面显示第2级。

恢复：

如果不刷新页面，我将无法从级别2进入级别1或从级别1进入级别2。

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

Answer 1

您在这里遇到了2个问题。

第一个是您将道具置于状态。通常这不是一个好习惯，应该避免，这样您就不会遇到这样的问题。在这种情况下，将props.level和props.data置于状态是完全不合理的，因为您根本不需要进行修改。

第二个是React Router是智能的，选择不重新安装您的组件。您没有为key组件指定Route道具，这表明里面的Quiz组件是同一东西，因此只应更改道具。

非常感谢，我们只需要解决第一个问题，因为此后就无需重新安装该组件了，因为不会有需要更改的状态。

这是解决方案： Quiz.js

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);

（只需将所有this.state.level替换为this.props.level，并将所有this.state.dataSet替换为this.props.data）

希望这会有所帮助！

Answer 2

更新：

我可以通过使用“ href”做一个非常简单的事情来修复它。

因此，我对此进行了更新：

import axios from 'axios';
import AuthService from "./AuthService";

const authService = new AuthService();
let token;

axios.interceptors.request.use(async function (config) {
    await authService.getUser().then(res => {
        if (res) {
            token = res.id_token;
            config.headers['Authorization'] = `Bearer ${token}`;
        }
    });

    // eslint-disable-next-line no-console
    console.log('interceptor', config);
    return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

对此：

<Button style={style} component={Link} to={next}>
  Next Level
</Button>

现在它可以正常工作了！

更改ReactJS URL，但不更改带有BrowserRouter的页面

2 个答案: