Не в состоянии использовать WithRouter реагировать-роутер-дом - PullRequest
0 голосов
/ 22 января 2019

Я новичок в реакции 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. SO

import { withRouter } from "react-router-dom";
export default withRouter(connect(mapStateToProps, {  logout  })(Header));

Я пытался использовать этот способ. Итак, это дает мне следующую ошибку.

You should not use <Route> or withRouter() outside a <Router>

Что я здесь не так делаю?

Ответы [ 4 ]

0 голосов
/ 22 января 2019

Итак, вы хотите сделать 2 вещи, внедрить состояние в заголовке и ввести информацию о маршрутизации в заголовке.Если вы находитесь за пределами <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 :) ... 

0 голосов
/ 22 января 2019

Вы визуализируете компонент Header (который использует withRouter) вне компонента Router. Вы должны убедиться, что все Route s и компоненты, использующие withRouter, должны быть дочерними по отношению к Router, на некотором уровне в иерархии.

В вашем случае, возможно, оберните div в App с Router?

Сведения из источника

Ошибка генерируется здесь , когда Route не получает context от своего провайдера . И, withRouter - это просто оболочка для Route. Единственный раз, когда контекст недоступен, это когда Route не вложен в Router где-то.

0 голосов
/ 22 января 2019

Ваша проблема в том, что рекрутер withRouter блокируется проверкой PureComponent, ставьте его после подключения:

export default connect(mapStateToProps, {  logout  })(withRouter(Header));

См .: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md#important-note

Лично я предпочитаю, чтобы мои провайдеры находились в одном месте.в index.js, а не в App.js, все ваше приложение должно быть упаковано в Router, а не в App.js:

const WrappedApp = (
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

ReactDOM.render(WrappedApp, document.getElementById('root'));
0 голосов
/ 22 января 2019

Вам нужно переместить <Header> компонент внутрь <Router> компонента, иначе он не будет работать, как говорит ошибка.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...