withRouter с подключением не работает в v5.0.0?

Версии -

"реагировать-маршрутизатор": "5.0.0", "реагировать-маршрутизатор-дом": "5.0.0"

В моем компоненте контейнера приложения я использую withRouter для доступа к свойствам местоположения и истории. Я использую это как -

export default withRouter(connect(mapStateToProps)(AppContainerComponent));

В результате я получаю пустую страницу. Никаких ошибок, просто пустая страница.

Если я удалю withRouter HOC, он заработает.

Также он работал в v4.0.0-beta.8.

Я импортирую withRouter как -

import { withRouter } from 'react-router';

Не уверен, в чем проблема.

Примечание. Я прошел через эта ссылка, в которой говорится о том, что метод shouldCOmponentUpdate не принимает во внимание изменения контекста (которые сейчас использует response-router), и предлагает обернуть компонент HOC 'withRouter', но сам по себе не работает на меня.

Обновлять -

Ниже приведен путь маршрута, который я использую -

index.js -

<Provider store={store}>
      <BrowserRouter>
        <AppContainerComponent />
      </BrowserRouter>
    </Provider>

appcontainer.component (связанный с ним redux) отображает следующий компонент -

<AppRoutes isAuthenticated={isAuthenticated} />

appRoutes.component.ts - этот компонент отображает настраиваемые HOC «UnauthenticatedRoute» и «AuthenticatedRoute», например:

<UnauthenticatedRoute
      path="/"
      exact
      component={SignupComponent}
      isAuthenticated={isAuthenticated} />

<AuthenticatedRoute
      path="/app"
      exact
      component={AppComponent}
      isAuthenticated={isAuthenticated} />

HOC «UnauthenticatedRoute» и «AuthenticatedRoute» будет отображать переданный компонент, если пользователь был успешно аутентифицирован, в противном случае он будет перенаправлен на путь «/ signup» с использованием компонента Redirect реактивного маршрутизатора.

Компонент приложения имеет набор маршрутов, определенных компонентом Маршрут как -

<Route exact 
       path="/path1"
       render={} 
/>

Еще одно обновление -

Наткнулся на эта ссылка, в которой рассказывается о проблеме, с которой я столкнулся, но решение - с помощью withRouter. Может я что-то импортирую не из нужного места? Что-то похожее здесь

Я использую response-router и response-router-dom с preact (8.4.2), preact-cli (v2.2.1) и preact-compact (3.18.4). Я не уверен, что это основная причина? Разве реактивный маршрутизатор не поддерживается из коробки для preact?

Я установил эту ссылку, чтобы продемонстрировать проблему. ( проблема_пример ветки)


reactjs react-redux react-router-dom react-router preact
person Awadhoot    schedule 07.05.2019    source источник
comment
вы пробовали import { withRouter } from 'react-router-dom';? вы можете разместить маршруты пути?   -  person Wanderer    schedule 07.05.2019
comment
Да, я пробовал импортировать его из response-router-dom. На самом деле я следил за этим - reacttraining.com/react-router/web/api/withRouter. Я не понял про «путь маршрутов», не могли бы вы его немного объяснить?   -  person Awadhoot    schedule 07.05.2019
comment
Я имею в виду, что для этого компонента должен быть определен путь маршрута (может быть в App.js или другом файле), который указывает компонент, который будет отображаться как: <Router><Route path="/:id" component={Child} /></Router>   -  person Wanderer    schedule 07.05.2019
comment
На самом деле, я не могу понять, почему он работал над 4.4.0-beta.8 , но не в следующей версии v5.0.0.   -  person Awadhoot    schedule 07.05.2019
comment
вы это проверили, похоже, похоже: github.com/ReactTraining/react-router/ issues / 4671   -  person Wanderer    schedule 07.05.2019
comment
Да, прошел через это (на самом деле несколько раз). Он предлагает вместо использования withRouter hoc во вложенных компонентах использовать его @ top component и передавать {location, history} потомкам через props. Основное обновление withRouter - это использование контекстного API, представленного в react 16, что полезно, если мы не хотим передавать {location, history} каждому компоненту. Но сам hoc у меня не работает.   -  person Awadhoot    schedule 07.05.2019

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте обернуть только AppContainerComponent с помощью withRouter, например:

export default connect(mapStateToProps)(withRouter(AppContainerComponent));
person Damian Kociszewski    schedule 07.05.2019
comment
Неа. Это не работает. Собственно эта ссылка - reacttraining.com/react-router/web/api/withRouter ясно сказано, что НЕ следует использовать withRouter hoc таким образом. - person Awadhoot; 07.05.2019

arrow_upward
1
arrow_downward

Мне удалось решить проблему, создав пользовательский withRouter hoc, который принимает компонент для рендеринга и обертывает этот компонент внутри компонента Router. Компонент Router имеет необходимые мне реквизиты (история, местоположение), и я передаю их компоненту, который визуализирую, полностью исключая использование RRD withRouter.

import { Route } from 'react-router-dom';

const withRouter = (ConnectedComponent) => {
  const witRouterComponent = (props) => (
    <Route render={routeProps =>
      <ConnectedComponent {...routeProps} {...props} />} />
  );
  return witRouterComponent;
};

export default withRouter;

Чтобы использовать его в (например, AppContainerComponent)

const ConnectedComponent = connect(mapStateToProps)(AppContainerComponent);

export default withRouter(ConnectedComponent);

Подробнее об этом здесь.

person Awadhoot    schedule 09.05.2019