时间戳

首页 > 解决方案 > 在路由组件之外反应路由重定向

javascript - 在路由组件之外反应路由重定向

问题描述

我在我的 React 应用程序中使用 React Router。在不在路由器组件内的 Header 组件中，我想在注册表单后重定向用户，但由于 Header 组件在路由器组件之外，我无法使用this.props.history.push('/');。如何在 Header 组件中重定向用户？这是我的应用组件：

<div>
    <Header order={this.order}/>
    <Router data={this.state.data}>
      <div>
        <Menu data={this.state.data}/>
        <Route exact path="/" component={Home} />
        <Route exact path="/post" component={PostList} />
        <Route path="/showpost/:slug" component={ShowPost} />
        <Route path="/page/:slug" component={ShowPage} />
        <Route path="/login" component={Login} />
        <Route path="/register" component={Register} />
        <Route path="/forgotpassword" component={Forgot} />
        <Route path="/password/reset/:token" component={Reset} />
        <Route path="/logout" component={Logout} />
        <Route path="/user" component={User} />
        <Route path="/saveorder" render={()=><SaveOrder data={this.state.data}/>} />
      </div>
    </Router>
    <Map />
    <Footer />
  </div>

标签： javascriptreactjsreact-router

解决方案

this.props.history.push('/')如果您的 Header 组件被传递给 withRouter HOC，您可以使用。withRouter 允许您在组件道具中获取历史记录。

所以...在 Header 组件中，您应该导入 withRouter HOC

import { withRouter } from 'react-router-dom';

并像这样导出您的 Header 组件：

export default withRouter(Header);

您可以在此处找到有关程序化导航的更多信息https://tylermcginnis.com/react-router-programmatically-navigate/

在帖子的末尾可以找到您想要做的事情的一个例子：）

推荐阅读