reactjs - React Router - 登录前和登录后的结构导航栏

Question

有人可以帮我用 React Router 构建 React App

<div>
      <Navbar /> //Navbar should be shown only for '/' and '/login'
      <Route path="/" component={IndexPage} />
      <Route path="/login" component={Login} />
      <Footer /> //Footer should be shown only for '/' and '/login'


      <NavbarInside /> //NavbarInside should be shown only for '/dashbaord' and '/settings'
      <Route path="/dashbaord" component={Dashbaord} />
      <Route path="/settings" component={Settings} />
      <FooterDashboard /> //FooterDashboard should be shown only for '/dashbaord' and '/settings'

      {/* <Route component={NoMatchPage} />Check 404 not working */}
    </div>

标签： reactjsreact-routerreact-router-dom

Answer 1

将几个根Route组件渲染为Switch与您想要渲染嵌套导航栏的“分组”路由匹配的一个。

1. 外部Switch组件确保只有 1 个“组”被匹配和渲染。
2. 内部Switch组件确保仅匹配和呈现 1 个“嵌套”路由。注意路由顺序和路径特异性，即更具体的路径排在不太具体的路径之前。

从您的代码框：

<Switch>
  <Route path={["/dashboard", "/settings"]}>
    <NavbarInside />
    <Switch>
      <Route path="/dashbaord" component={Dashbaord} />
      <Route path="/settings" component={Settings} />
    </Switch>
    <FooterDashboard />
  </Route>

  <Route path={["/about", "/"]}>
    <Navbar />
    <Switch>
      <Route path="/about" component={AboutPage} />
      <Route path="/" component={IndexPage} />
    </Switch>
    <Footer />
  </Route>
</Switch>

注意：如果您尝试重新集成路由/组件，可能会出现奇怪的情况，NoMatchPage因为“/”是所有路径的前缀，它将被匹配并渲染IndexPage组件。您可以exact在根路由上使用该道具，但这将排除“/about”上的任何嵌套路径。