History.push не работает во вложенном дочернем компоненте navbar

Question

У меня есть приложение, подобное следующему:

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

Тогда внутри компонента приложения у меня есть следующее:

<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/');

работает FINE и перенаправляет меня на нужный маршрут. Однако внутри компонента NavMenu то же самое НЕ перенаправляет меня на другой маршрут, оно просто обновляет URL. Я пытаюсь с Router, и он все еще не работает. У кого-нибудь есть идеи как это исправить? Спасибо

Answer 1

Вы должны передать реквизиты в NavMenu как:

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

или вы можете попробовать экспортировать оба компонента с помощью Router:

export default withRouter(Layout);

...

export default withRouter(NavMenu);

и проталкивать маршрут с помощью:

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