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

Question

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

приложение

<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: '/' даже если я на другой странице. Почему это происходит?

Answer 1

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