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

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

这显然不起作用，但我想知道哪种方法是最好的

更新

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

---

公共（“/”）路由工作正常，但管理员（“/admin”）向我抛出了一个404您可以有两个数组对象用于两个规则（

admin

和

user

），然后您可以将其映射到

路由

组件，如：

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

adminRoutes=[{path:'/admin'，组件：AdminHome，…}]
nomralUserRoutes=[{path:'/'，组件：UserHome，isExact:true，…}]
路由=isAdmin？adminRoutes:nomralUserRoutes
render（）{
返回(
routes.map（route=>（））
)
}

---

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

Auth

和…

我解决此问题的方法之一是使用PrivateRoute HOC。您可以根据您的身份验证需要对此进行修改

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

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从'react redux'导入{connect}；
从“道具类型”导入道具类型；
const privaterout=（{component:component，auth，…rest}）=>(
auth.isAuthenticated==true？：
}
/>
);
PrivateRoute.propTypes={
auth:PropTypes.object.isRequired，
组件：PropTypes.elementType.isRequired，
};
常量mapStateToProps=（状态）=>({
auth:state.auth，
});
导出默认连接（MapStateTops）（PrivateRoute）；

然后在需要受保护的路由的任何位置使用此HOC

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

您能再解释一下PrivateRoute HOC吗？当然可以，它可以代替，因为它会在内部调用React路由器。它将检查InMyFace auth.isAuthenticated的Redux存储状态，这是由登录方法设置的布尔值。然后，它将呈现您在调用时设置的子组件，这是一个很酷的功能，将来可以使用，但不是我现在正在搜索的功能，因为现在我只想使用带有2个路由的交换机，所以如果我转到“/admin”，我有一些东西，如果我转到“/”，那么这两个路由中必须有另一个用于其他组件的交换机，当然，我可以简单地写“/admin/products”，“/admin/product/：productId”，但伸缩性不是很强，我只是做了一些代码工作，我会更新帖子，但仍然不能100%工作