#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. Это также не перенаправляет меня. Я не знаю, почему контекст работает в макете