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

<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

最佳答案

您可以为两个规则(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 和 ...

https://stackoverflow.com/questions/63273849/