Невозможно использовать WithRouter из react-router-dom
Я новичок в реакции js. Здесь я пытаюсь использовать withrouter, чтобы получить информацию о моем местоположении.
Итак, у меня есть следующая структура.
index.js
ReactDOM.render(
<App />
, document.getElementById('root'));
App.js
<Provider store = {store}>
<div>
<Header />
<Main />
</div>
</Provider>
Main.js
return (
<Router history = {history}>
<div>
{this.props.isFetching && <Loading />}
<Switch>
<PrivateRoute exact path = "/" component = {LandingPage} />
<PrivateRoute exact path = "/create-job" component = {NewJob} />
<PrivateRoute exact path = "/user-jobs" component = {JobList} />
<Route exact path = "/login" component = {Login} />
</Switch>
</div>
</Router>
Теперь я пытаюсь использовать withRouter в Header.js. который не является частью Router. ТАК,
import { withRouter } from "react-router-dom";
export default withRouter(connect(mapStateToProps, { logout })(Header));
Я пробовал использовать этот способ. Итак, это дает мне следующую ошибку.
You should not use <Route> or withRouter() outside a <Router>
Что я здесь делаю не так?
Нет, но это цель withrouter
нет, это не так . его цель - передать реквизиты, такие как match, компоненту, который не определен как / в компоненте Route.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вам нужно переместить компонент <Header> внутрь компонента <Router>, иначе он не работает, как говорит ошибка.
Да, но я думаю, что это цель withRouter
Назначение withRouter — получить Router из родительского элемента. Если нет родительского элемента Router, то и получать нечего.
@GaneshKaspate Нет, цель withRouter заключается в том, что всякий раз, когда у вас нет компонента, обрабатываемого <Route> (в вашем примере это LandingPage, NewJob и т. д.), вы можете украсить его с помощью withRouter, и вы получите доступ к истории и другой реквизит маршрутизатора. Я предлагаю вам переместить <Router> в App.js вместо <div> ... withRouter работает, только если компонент находится где-то внутри <Router>.
Вы визуализируете компонент Header (который использует withRouter) вне компонента Router. Вы должны убедиться, что все Route и компоненты, использующие withRouter, должны быть дочерними по отношению к Router на каком-то уровне иерархии.
В вашем случае может div завернуть в App с Router?
Подробности из источника
Ошибка генерируется здесь, когда Route не передает context из своего провайдер. А с маршрутизатором — это просто оболочка над Route. Единственный раз, когда контекст недоступен, это когда Route не вложен где-то внутри Router.
Ваша проблема в том, что реквизит withRouter блокируется проверкой PureComponent, поместите его после подключения:
export default connect(mapStateToProps, { logout })(withRouter(Header));
Лично я предпочитаю, чтобы мои провайдеры были в одном месте в index.js, а не в App.js, все ваше приложение должно быть обернуто в Router, а не в App.js:
const WrappedApp = (
<Provider store = {store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(WrappedApp, document.getElementById('root'));
Итак, вы хотите сделать две вещи: ввести состояние в заголовок и ввести информацию о маршрутизации в заголовок.
Если вы находитесь за пределами компонента <Router/>, вы не сможете использовать withRouter( просто потому, что у вас не будет реквизитов соответствия для ссылки на ваш компонент.
Что вам нужно сделать, так это создать что-то, называемое макетами.... и использовать макеты в определении страницы, как это.
Допустим, у вас есть этот маршрут <PrivateRoute exact path = "/" component = {LandingPageContainer} />.
Теперь внутри LandingPage вам нужно сделать что-то вроде
landingPageContainer.js
render() {
return (
<SimpleLayout header = {<Header ...this.props/> footer = {<Footer ...this.props/>}>
<LandingPageDummyPage ...this.props/>
<SimpleLayout/>
);
}
export default connect(withRouter(LandingPageContainer);
это скопирует все реквизиты, переданные в Simple Layout, в ваш LandingPageLayout, верхний и нижний колонтитулы.
simpleLayout.js
render() {
return (
<div>{this.props.header} </div>
<div>{this.props.children} </div>
<div{this.props.footer} </div>
);
}
export withRouter(SimpleLayout);
advice . read the router documentation and try to understand whats the purpose if it... you didn`t quite get it :) ...
вам нужно обернуть компонент
Headerкомпонентом<Router/>