Question

我知道以前已经讨论过此问题。但是，以某种方式我无法使其在我的应用程序中正常工作。

通常，组件之间的导航正常。但是，history.push仅更改URL，而不更新内容。例如，在“登录”页面中，如果已经登录，我想将用户导航到“首页”。但是，该代码仅更新URL。有什么想法吗？

<BrowserRouter basename={baseUrl} history={history}>
    <Provider store={store}>
        <App />
    </Provider>
</BrowserRouter >,

在index.js中，我有以下内容

<Layout>
    <Switch>
        <PrivateRoute exact path="/home" component={withRouter(Home)} />
        <Route exact path='/home' component={withRouter(Home)} />
        <Route exact path='/login' component={Login} />
        <Route exact path='/register' component={withRouter(Register)} />
    </Switch>
</Layout>

在app.js中，我有：

{{1}}

Answer 1

您遇到的问题是您使用的浏览器路由自定义历史记录不正确。 BrowserRouter使用自己的历史记录，您必须使用它来更改页面

const Login = ({history}) => {

    useEffect(() => {
        if (authenticationService.currentUserValue != null) {
            history.push('/home');
        }
    }, [])

    //other code
}

如果您出于某种原因使用了自定义历史记录，则需要将Router与自定义历史记录支持一起使用

<Router basename={baseUrl} history={history}>
    <Provider store={store}>
        <App />
    </Provider>
</Router >

history.push仅在React应用程序中使用BrowserRouter时更新URL

1 个答案: