javascript - React Router 问题 : why history. 推送更改 url 但不更新组件

Question

下面是一个示例代码，它呈现两个按钮(主页和关于)和两个页面组件(也是主页和关于)。单击每个按钮后，按钮将调用 history.push转到相应的页面并应该呈现组件。

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

这就是我没有使用<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 使用)与用于导航应用程序的变量相同。事实并非如此。

您应该使用此历史记录进行导航:

从'react-router-dom'导入{useHistory}

用法:

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

有了这个，一切都应该正常