Question

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

但是，我注意到的是，当单击按钮时，URL会更改，但是组件不会显示。在创建类似{ forceRefresh: true }的浏览器历史记录时，我通过传递const history = createBrowserHistory({ forceRefresh: true });属性来解决此问题，但是，我还是不太明白为什么会发生这种情况，以及为什么forceRefresh解决了该问题，并且希望您进行任何解释。 / p>

之所以没有使用<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>
    );
};

因此，一切都会正常工作

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

1 个答案: