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

Question

我有多個布局，應該包括不同的屏幕。 每個布局都有自己的 header、頁腳和其他類似頁面應該共享的內容。 這是我想出的代碼：

<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內呈現的索引頁面上，您也會看到來自AuthLayout和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，因此它們可以處理將所有道具從路由向下傳遞到頁面組件，但如果您只想做一個內聯包裝器，您可以使用渲染function：

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

[編輯] 一個示例布局 HOC（文檔）

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)} />