Мне нужно разделить маршрутизатор браузера на две части

Question

Я работаю над проектом, в котором мне нужно разделить маршрутизатор браузера на два, один для пользователей publi c, а другой для администраторов, это моя идея:

<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>

it явно не работает таким образом, но я хотел бы знать, как лучше всего сделать эту работу

ОБНОВЛЕНИЕ

теперь я работаю над этим и Я получил это

<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>

маршрут publi c ("/") работает нормально, но администратор ("/ admin") выдает мне 404

Answer 1

Один из способов решить эту проблему - использовать PrivateRoute HO C. Вы можете изменить это в соответствии с вашими потребностями аутентификации.

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

const PrivateRoute = ({ component: Component, auth, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      auth.isAuthenticated === true ? <Component {...props} /> : <Redirect to="/login" />
    }
  />
);
PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired,
  component: PropTypes.elementType.isRequired,
};
const mapStateToProps = (state) => ({
  auth: state.auth,
});
export default connect(mapStateToProps)(PrivateRoute);

Затем используйте этот HO C везде, где вам нужен защищенный маршрут.

<PrivateRoute exact path="/products" component={AdminProductsList} />
<PrivateRoute exact path="/product/:productId" component={AdminEditProduct} />

Answer 2

у вас может быть два объекта массива для двух правил (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 и ...