反应路由器中的两条单独的路由答案

【问题标题】：Two separately routes in react router反应路由器中的两条单独的路由
【发布时间】：2019-01-24 14:25:13
【问题描述】：

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

这是我的路由器的样子：

  <Router>
    <Container>
    <Header/> // it is intended
      <Switch>
        <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='/admin' component={ AdminPanel } /> //here I want all my admin routes which generates its own header and footer
        <Route path='*' component={ NotFound } />
      </Switch>
    <Footer /> // it is intended
    </Container>
  </Router>

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

您可以使用useLocation() Hook 来查找路径和分隔路径。

例如：

import { useLocation } from 'react-router-dom'

if (useLocation().pathname.includes("/admin")) {
    return (
      <Switch>
        <Route exact path="/admin" component={Admin} />
      </Switch>
    );
  } else {
    return (
      <div className="App">
        <Navbar />
        <Switch>
         // Routes goes
       
        </Switch>
      </div>
    );

【讨论】：