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

Question

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

但是，我注意到的是，当单击按钮时，URL会更改，但组件不会显示。在创建像{ forceRefresh: true }这样的浏览器历史记录时，我通过传递const history = createBrowserHistory({ 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>
    );
};

因此，一切都会正常工作

Answer 2

[BrowserRouter忽略历史道具，更改：

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

至：

import {Router, Switch, Route } from 'react-router-dom';

---

或者您可以使用Link更改路线：

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
//...
<li>
  <Link to="/">Home</Link>
</li>
<li>
  <Link to="/about">About</Link>
</li>