Question

我有我的应用，我想添加一个管理路由。问题是我的页眉和页脚在每条路线上都呈现，因此当我尝试访问管理面板时，它们也会呈现。如何为2个不同的应用程序分开2条不同的路线（不完全是，但希望您能理解）。

这是我的路由器的样子：

"n"

Answer 1

您可以为管理员和非管理员设置不同的路由。您可以执行以下操作：

if(admin) {
  return (
   <Router>
    <Header>
     // ... routes here
    </Header>
   </Router>
  )
} else {
  return (
   <Router>
    <AdminHeader />
     // ... routes
   </Router>
  )
}

Answer 2

您可以利用以组件为道具的布局类型组件，向其中添加必要的组件，然后返回一个新的组件，如下所示：

const Layout = ({ children }) => {
  return (
    <section>
      <Header/>
        {children}
      <Footer/>
    </section>
  )

}

然后，您要使用页眉和页脚呈现的任何组件都可以声明为布局组件的子代：

  <Router>
    <Container>
      <Switch>
        <Route path='/admin' component={ AdminPanel } /> //here I want all my admin routes which generates its own header and footer
        <Layout>
            <Route exact path='/' component={ Home } />
            <Route path='/news/:category/:id/:title' component={ SingleArticle } />
            <Route path='/news' component={ Home } />
            <Route path='/live' component={ Live } />
            <Route path='*' component={ NotFound } />
        </Layout>
      </Switch>
    </Container>
  </Router>

React路由器中有两条单独的路由

2 个答案: