В моем приложении есть следующий код:
приложение
<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: '/'
, даже если я нахожусь на другой странице. Почему это происходит?
@ rooch84 Неа, у меня есть HeaderContainer
в withRouter
И this.props.match правильный в AuthenticatedSection? Если так, возможно, стоит взглянуть на withRouter еще раз. В частности, этот бит о том, что он не является реактивным: github.com/ReactTraining/react-router/blob/master/packages/…
@ rooch84 Хорошо, объект match
в AuthenticatedSection
также заполнен свойствами маршрута «приборной панели» и никогда не изменяется.
Меня смущает твое редактирование. У вас есть два переключателя?
@ rooch84 да, наверное, в этом и причина всего этого. Поскольку <HeaderContainer> находится внутри первого переключателя (с маршрутами входа / панели мониторинга). Но я не знаю, как это решить, потому что я не хочу помещать <HeaderContainer> внутри каждого маршрута AuthenticatedRoutesSwitch
: - /
Как насчет того, чтобы поднять HeaderContainer из переключателя, чтобы он отображался независимо от маршрута?
@ rooch84 это не решение, потому что я не могу отобразить заголовок, если пользователь не аутентифицирован. Также я думаю, что он не распознает текущий маршрут, его не будет внутри какого-либо переключателя.
Я думаю, что единственно правильное решение - разместить HeaderContainer
внутри каждой страницы, определенной через Route
. Если кто-нибудь знает лучшее решение, дайте мне знать.
Таким образом, решение состоит в том, чтобы разместить HeaderContainer
внутри каждой страницы, определенной через Route
в AuthenticatedRoutesSwitch
. Если кто знает лучшее решение, дайте мне знать.
Вы передаете this.props.match в HeaderContainer?