Question

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

<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>

Answer 1

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

所以...在Header组件中你应该使用路由器HOC导入

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

并导出您的Header组件，如下所示：

export default withRouter(Header);

您可以在https://tylermcginnis.com/react-router-programmatically-navigate/

找到有关程序化导航的更多信息

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

Answer 2

在Router内移动标题，只有<Router>内可以使用任何react-router的apis的组件。

代码看起来像这样：

  <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>

在路由组件外部反应路由器重定向

2 个答案: