с роутером с коннектом не работает в v5.0.0?

Question

Версии -

«реагирующий маршрутизатор»: «5.0.0», «response-router-dom»: «5.0.0»

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

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

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

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

Кроме того, раньше он работал в v4.0.0-beta.8.

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

import { withRouter } from 'react-router';

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

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

Обновление -

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

index.js -

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

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

<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 реагирующего маршрутизатора.

AppComponent имеет несколько маршрутов, определенных Route компонент как -

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

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

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

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

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

Answer 1

Попробуйте обернуть просто AppContainerComponent с вашим withRouter , например:

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

Answer 2

Мне удалось решить эту проблему, создав пользовательский withRouter hoc, который принимает Компонент для рендеринга и оборачивает этот компонент внутри компонента Маршрутизатор.У компонента 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);

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