如何使用 React 路由器嵌套路由

Question

我有多个布局，应该包含不同的屏幕。每个布局都有自己的页眉、页脚和类似页面应该共享的其他内容。这是我想出的代码：

<BrowserRouter>
  <Route path={['/index', '/about']} component={BaseLayout}>
    <Route path="/index" component={Index} />
    <Route path="/about" component={About} />
  </Route>
  <Route path={['/sign-in', '/sign-up']} component={AuthLayout}>
    <Route path="/sign-in" component={SignIn} />
    <Route path="/sign-up" component={SignUp} />
  </Route>
  <Route path={['/stats'} component={DashboardLayout}>
    <Route path="/stats" component={Stats} />
  </Route>
</BrowserRouter>

上面的代码显然行不通，因为：

警告：您不应使用 <Route component> 和 同一路线； <Route component> 将被忽略

对 SO 上类似问题的回答建议直接使用包装器组件：

<BrowserRouter>
  <BaseLayout>
    <Route path="/index" component={Index} />
    <Route path="/about" component={About} />
  </BaseLayout>
  <AuthLayout>
    <Route path="/sign-in" component={SignIn} />
    <Route path="/sign-up" component={SignUp} />
  </AuthLayout>
  <DashboardLayout>
    <Route path="/stats" component={Stats} />
  </DashboardLayout>
</BrowserRouter>

这种方法的问题在于，即使它呈现单个屏幕，它也会呈现来自其他布局的元素，即，如果您在呈现在BaseLayout 内的索引页面上，您将看到来自@987654326 的元素@ 和 DashboardLayout 也是。这有点道理，因为它们没有包裹在Route 中。

有人建议抓取所有布局的内容并将它们作为兄弟姐妹添加到当前路由中。然而，这对我来说是一团糟。我确实想将所有布局保存在单独的文件中，并且只将屏幕作为子项传递给它们。

Answer 1

这是一个潜在布局结构的粗略草图：

<Header>
  <Router>
    <Router path={['/index', '/about']} component={HeaderComponent} />
    <Router path={['/sign-in', '/sign-up']} component={AuthHeaderComponent} />
  </Router>
</Header>
<Screens>
  <Router>
    <Route path="/index" component={BaseLayout(Index)} />
    <Route path="/about" component={BaseLayout(About)} />
    <Route path="/sign-in" component={AuthLayout(SignIn)} />
    <Route path="/sign-up" component={AuthLayout(SignUp)} />
    <Route path="/stats" component={DashboardLayout(Stats)} />
  </Router>
</Screens>
<Footer>
  <FooterComponent />
</Footer>

在此示例中，包装器是 HOC，因此它们可以处理将所有道具从路由向下传递到页面组件，但如果您只想做一个内联包装器，您可以使用 render 函数：

<Route
  path="/index"
  render={routeProps => {
    return (
      <BaseLayout>
        <Index {...routeProps}/>
      </BaseLayout>
    );
  }}
/>

[编辑] 一个示例布局 HOC (docs)

const withBaseLayout = WrappedComponent => {
  // any business logic required for the layout
  // layoutProps, style, etc...
  return (
    <BaseLayout {...layoutProps}>
      <WrappedComponent {...this.props} /> // these are all the passed in props
      // you can inject more props into Wrapped component as well
      // i.e. redux's connect or react-router-dom's withRouter HOCs
    </BaseLayout>
  );
}

// in index.js
export default withBaseLayout(Index);

// in route
<Route path="/index" component={Index} /> // already wrapped

或者直接作为组件

const BaseLayoutHOC = WrappedComponent => {
  // any business logic required for the layout
  // layoutProps, style, etc...
  return (
    <BaseLayout {...layoutProps}>
      <WrappedComponent {...this.props} />
    </BaseLayout>
  );
}

// in route
<Route path="/index" component={BaseLayoutHOC(Index)} />