时间戳

首页 > 解决方案 > 我需要将浏览器路由器一分为二

reactjs - 我需要将浏览器路由器一分为二

问题描述

我正在一个项目中工作，我需要将浏览器路由器一分为二，一个用于公共用户，另一个用于管理员，这是我的想法：

<BrowserRouter>
  <Layout>
    <Route exact path="/" component="{Home}">
      <Switch>
        <Route exact path="/cart" component="{Cart}" />
        <Route exact path="/product/:productId" component="{ProductPage}" />
        <Route component="{NotFound}" />
      </Switch>
    </Route>
  </Layout>

  <AdminLayout>
    <Route exact path="/admin" component="{AdminHome}">
      <Switch>
        <Route exact path="/products" component="{AdminProductsList}" />
        <Route
          exact
          path="/product/:productId"
          component="{AdminEditProduct}"
        />
        <Route component="{NotFound}" />
      </Switch>
    </Route>
  </AdminLayout>
</BrowserRouter>

它显然不能这样工作，但我想知道哪种方法是完成这项工作的最佳方法

更新

现在我一直在努力，我做到了

<BrowserRouter>
  <Switch>
    <Layout>
      <Route path="/">
        <Switch>
          <Route exact path="/" component="{Home}" />
          <Route exact path="/cart" component="{Cart}" />
          <Route exact path="/product/:productId" component="{ProductPage}" />
          <Route component="{NotFound}" />
        </Switch>
      </Route>
    </Layout>

    <AdminLayout>
      <Route path="/admin">
        <Switch>
          <Route exact path="/" component="{AdminHome}" />
          <Route exact path="/products" component="{AdminProductsList}" />
          <Route
            exact
            path="/product/:productId"
            component="{AdminEditProduct}"
          />
          <Route component="{NotFound}" />
        </Switch>
      </Route>
    </AdminLayout>
  </Switch>
</BrowserRouter>

public("/") 路由工作得很好，但是 admin("/admin") 给我一个 404

标签： reactjsreact-router

解决方案

admin您可以为两个规则（和）拥有两个数组对象user，然后您可以将其映射到Route组件，例如：

adminRoutes = [{path: '/admin', component: AdminHome, ...}]
nomralUserRoutes = [{path: '/', component: UserHome, isExact: true, ...}]
routes = isAdmin ? adminRoutes : nomralUserRoutes
render(){
  return (
<BrowserRouter>
    <Switch>
  routes.map(route => (<Route exact path={route.path} component={route.component} ... />))
    </Switch>
</BrowserRouter>)
}

它只是一个示例，您可以使路由对象更复杂以支持更多功能Auth，例如...

推荐阅读