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

Question

我有一个类似以下的应用程序：

  <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，但仍然无法正常工作。  有谁知道如何解决这个问题？谢谢

Answer 1

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

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

或者您可以尝试使用路由器导出两个组件：

export default withRouter(Layout);

...

export default withRouter(NavMenu);

并通过以下方式推入路线

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