History.push не работает во вложенном дочернем компоненте навигационной панели

#reactjs #react-router

#reactjs ( реакция ) #реагировать-маршрутизатор #reactjs

Вопрос:

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

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

Моя проблема:
Внутри компонента макета, когда я делаю следующее с помощью withRouter:

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

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

1. Является ли ваш NavMenu дочерним по отношению к BrowserRouter компоненту также?

2. весь App.js который содержит макет и т.д., является дочерним элементом <ConnectedRouter history={история}>

3. Если NavMenu не находится внутри BrowserRouter, он не может получать реквизиты истории

4. мы вообще не используем BrowserRouter. Итак, почему this.context.router работает в Layout, но не в NavMenu?

Ответ №1:

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

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

или вы можете попробовать экспортировать оба компонента с маршрутизатором:

 export default withRouter(Layout);

...

export default withRouter(NavMenu);

и отправка маршрута с:

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

1. Я пробовал это, но он только обновляет URL, как и раньше

2. постарайтесь не использовать контекст, вместо этого используйте this.props.history, я обновил ответ

3. Это также не перенаправляет меня. Я не знаю, почему контекст работает в макете