React router v4 - неправильное содержимое объекта соответствия

В моем приложении есть следующий код:

приложение

<BrowserRouter>
  <div className="app">
    <Switch>
      <Route path={ getRoutePath('login') } component={ LoginSection } />
      <Route path={ getRoutePath('dashboard') } component={ AuthenticatedSection } />
    </Switch>
  </div>
</BrowserRouter>

Компонент AuthenticatedSection

<div className="authenticated-layout">
  { authenticatedUser.isFetching === false &&
    <div>
      <HeaderContainer />
      <div className="wrapper">
        <AuthenticatedRoutesSwitch />
      </div>
      <FooterContainer />
    </div>
  }
</div>

AuthenticatedRoutesSwitch

<Switch>
  <Route exact path={ getRoutePath('dashboard') } render={ this.redirectToWorkspaces } />
  <Route path={ getRoutePath('workspace.configuration.create') } component={ ConfigurationCreatePage } />
 <Route path={ getRoutePath('workspace.show') } component={ WorkspaceShowPage } />
 <Route path={ getRoutePath('workspace.list') } component={ WorkspaceListPage } />

  <Route exact path={ getRoutePath('administration') } render={ this.redirectToUsersAdministration } />
  <AdminProtectedRoute path={ getRoutePath('administration.users') } component={ UserListPage } />
  <AdminProtectedRoute path={ getRoutePath('administration.oauth') } component={ OAuthListPage } />

  <Route path={ getRoutePath('trash.list') } component={ TrashList } />
</Switch>

Моя проблема в том, что если я обращусь к переменной this.props.match внутри компонента <HeaderContainer /> или также к AuthenticatedSection, я всегда получу один и тот же объект по умолчанию (вероятно, маршрут панели управления) с пустым params, path: '/', url: '/', даже если я нахожусь на другой странице. Почему это происходит?

Вы передаете this.props.match в HeaderContainer?

rooch84 10.09.2018 11:44

@ rooch84 Неа, у меня есть HeaderContainer в withRouter

ketysek 10.09.2018 11:45

И this.props.match правильный в AuthenticatedSection? Если так, возможно, стоит взглянуть на withRouter еще раз. В частности, этот бит о том, что он не является реактивным: github.com/ReactTraining/react-router/blob/master/packages/…

rooch84 10.09.2018 12:05

@ rooch84 Хорошо, объект match в AuthenticatedSection также заполнен свойствами маршрута «приборной панели» и никогда не изменяется.

ketysek 10.09.2018 12:17

Меня смущает твое редактирование. У вас есть два переключателя?

rooch84 10.09.2018 12:31

@ rooch84 да, наверное, в этом и причина всего этого. Поскольку <HeaderContainer> находится внутри первого переключателя (с маршрутами входа / панели мониторинга). Но я не знаю, как это решить, потому что я не хочу помещать <HeaderContainer> внутри каждого маршрута AuthenticatedRoutesSwitch: - /

ketysek 10.09.2018 12:34

Как насчет того, чтобы поднять HeaderContainer из переключателя, чтобы он отображался независимо от маршрута?

rooch84 10.09.2018 12:39

@ rooch84 это не решение, потому что я не могу отобразить заголовок, если пользователь не аутентифицирован. Также я думаю, что он не распознает текущий маршрут, его не будет внутри какого-либо переключателя.

ketysek 10.09.2018 12:46

Я думаю, что единственно правильное решение - разместить HeaderContainer внутри каждой страницы, определенной через Route. Если кто-нибудь знает лучшее решение, дайте мне знать.

ketysek 10.09.2018 12:48
1
9
287
1

Ответы 1

Таким образом, решение состоит в том, чтобы разместить HeaderContainer внутри каждой страницы, определенной через Route в AuthenticatedRoutesSwitch. Если кто знает лучшее решение, дайте мне знать.

Другие вопросы по теме