React Router 问题：为什么 history.push 改变了 url 但不更新组件

Question

下面是一个示例代码，它呈现两个按钮（home 和 about）和两个页面组件（还有 Home 和 About）。单击每个按钮后，按钮将调用history.push 以转到相应的页面并应呈现组件。

但是，我注意到当单击按钮时，url 会发生变化，但组件不会显示。在创建像 const history = createBrowserHistory({ forceRefresh: true }); 这样的浏览器历史记录时，我设法通过传递 { forceRefresh: true } 属性来解决此问题，但我不太明白为什么会发生这种情况以及为什么 forceRefresh 可以解决问题，并希望得到任何解释。

我没有使用<Link> 组件来环绕按钮的原因是我想在单击按钮时调用一个函数来执行某些操作。如果有其他方法可以做到这一点，我很想从社区中知道。谢谢。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const MyApp = () => {
    const history = createBrowserHistory();
    return (
        <Router history={history}>
            <div>
                <ul>
                    <li>
                        <button onClick={() => history.push('/')}>Home</button>
                    </li>
                    <li>
                        <button onClick={() => history.push('/about')}>About</button>
                    </li>
                </ul>

                <Switch>
                    <Route exact path='/'>
                        <Home />
                    </Route>
                    <Route exact path='/about'>
                        <About />
                    </Route>
                </Switch>
            </div>
        </Router>
    );
};

function Home() {
    return (
        <div>
            <h2>Home</h2>
        </div>
    );
}

function About() {
    return (
        <div>
            <h2>About</h2>
        </div>
    );
}

ReactDOM.render(<MyApp />, document.getElementById('root'));

Answer 1

这是因为这条线：

const history = createBrowserHistory();

您正在实例化一个 history 对象，Router 将使用该对象来跟踪路由历史记录。这是Router 在后台使用的东西，您不必担心。

您的错误在于认为您在此处声明的history 变量（由Router 使用）与在应用程序中导航时使用的变量相同。不是。

您应该使用此history 进行导航：

import { useHistory } from 'react-router-dom'

用法：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { useHistory } from 'react-router-dom';

const MyApp = () => {
    const historyInstance = createBrowserHistory();

    const history = useHistory();

    return (
        <Router history={historyInstance}>
            <div>
                <ul>
                    <li>
                        <button onClick={() => history.push('/')}>Home</button>
                    </li>
                    <li>
                        <button onClick={() => history.push('/about')}>About</button>
                    </li>
                </ul>

                <Switch>
                    <Route exact path='/'>
                        <Home />
                    </Route>
                    <Route exact path='/about'>
                        <About />
                    </Route>
                </Switch>
            </div>
        </Router>
    );
};

这样，一切都应该正常