<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="*" element={<Navigate to="/dashboard" />} />
<Route element={<SuperadminRoute />}>
<Route exact path="/dashboard" element={<Mycomponent />} />
</Route>
<Route element={<AdminRoute />}>
<Route exact path="/dashboard" element={<Mycomponent />} />
</Route>
<Route element={<UserRoute />}>
<Route exact path="/dashboard" element={<Mycomponent />} />
</Route>
</Routes>
</Router>
Update:查看所有父组件SuperadminRoute,AdminRoute,UserRoute是私有路由,不能访问另一个父路由的路由.他们有判断授权的代码.以及CheckAuth应该做些什么来防止一个角色不进入另一个角色的路由.所以我能简化一下吗?
SuperAdmin.js
const SuperadminRoute = () => {
return isAuthenticated ? (
<CheckAuth applicableTo={USER_TYPES.ADMIN} role={user?.role}>
{lodar && !user && !streamStates && !totalProcessingLimit ? (
<Spin indicator={antIcon} className="loader__full" />
) : (
<>
<Header/>
<Outlet }} />
</>
)}
</CheckAuth>
) : (
<Navigate to="/login" />
);
};
export default SuperadminRoute;
像上面一样,我在其他Admin.js和User.js中也有相同的条件
Admin.js
return (
<div>
<CheckAuth applicableTo={USER_TYPES.ADMIN} role={user?.role}>
<Header2 />
<Outlet />
</CheckAuth>
</div>
)
User.js
return (
<div>
<CheckAuth applicableTo={USER_TYPES.USER} role={user?.role}>
<Header3 />
<Outlet />
</CheckAuth>
</div>
)
CheckAuth.js
const CheckAuth = ({ applicableTo, role, children }) => {
const navigate = useNavigate();
const [isRenderChildren, setIsRenderChildren] = useState(false);
useEffect(() => {
if (applicableTo && role) {
switch (applicableTo) {
case USER_TYPES.ADMIN:
if (role !== ROLE.SUPERADMIN && role !== ROLE.SUPERADMIN) {
return navigate("/dashboard");
}
break;
case USER_TYPES.USER:
if (role !== ROLE.SUPER_ADMIN && role !== ROLE.ADMIN && role !== ROLE.USER) {
return navigate("/dashboard");
}
break;
default:
return navigate("/login");
}
setIsRenderChildren(true);
}
}, [role]);
return <>{isRenderChildren ? children : null}</>;
};
export default CheckAuth;
在我的所有父组件,即SuperadminLine、Admin、UserRoad中,我们有不同的标头,这就是为什么我不想为公共路由创建单独的容器,因为我必须为标头设置条件.那么,是否可以创建同名的路由,并且角色登录的任何人都应该重定向到他们的路由?