History.push 在嵌套的子导航栏组件中不起作用答案

【问题标题】：History.push doesn't work in nested child navbar componentHistory.push 在嵌套的子导航栏组件中不起作用
【发布时间】：2019-04-04 13:50:37
【问题描述】：

我有一个类似下面的应用：

  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>

然后在 App 组件中我有以下内容：

<Layout>
        <Route exact path='/' component={Home} />
        <Route path='/methodmembers/'  component={MethodMembers} />
</Layout>

在 Layout 组件中我有一个子 NavMenu 组件：

 return (
        <Grid fluid>                     
           <NavMenu/>
        </Grid>
)

我的问题：在 Layout 组件中，当我使用 withRouter 执行以下操作时：

const { history } = this.context.router;
      e.preventDefault();
      history.push('/methodmembers/');

它工作正常，它将我重定向到所需的路线。但是，在 NavMenu 组件内部，同样的事情不会将我重定向到另一条路线，它只是更新 url。我正在尝试使用Router，但它仍然无法正常工作。有谁知道如何解决这个问题？谢谢

【问题讨论】：

【解决方案1】：

您应该将道具传递给 NavMenu，例如：

 return (
    <Grid fluid>                     
       <NavMenu {...this.props}/>
    </Grid>
)

或者您可以尝试使用Router 导出这两个组件：

export default withRouter(Layout);

...

export default withRouter(NavMenu);

并通过以下方式推送路线：

this.props.history.push('/methodmembers/');

【讨论】：