3

我在我的 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>
4

2 回答 2

3

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/

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

于 2018-05-21T11:51:42.750 回答
0

move Header inside Router，只有里面的组件<Router>可以使用任何 react-router 的 api。

代码如下所示：

  <div>
    <Router data={this.state.data}>
      <div>
        <Header order={this.order} />
        <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>
于 2018-05-21T12:12:57.413 回答