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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
9
287
1

Ответы 1

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

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