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，那么我将总是得到带有空{的相同默认对象（可能是仪表板路线） {1}}，params，即使我在其他页面上也是如此。为什么会这样？

Answer 1

因此解决方案是将HeaderContainer放在Route中通过AuthenticatedRoutesSwitch定义的每个页面内。如果有人知道更好的解决方案，请告诉我。

React Router V4-匹配对象的错误内容

1 个答案: