<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中,我们有不同的标头,这就是为什么我不想为公共路由创建单独的容器,因为我必须为标头设置条件.那么,是否可以创建同名的路由,并且角色登录的任何人都应该重定向到他们的路由?

推荐答案

您不能使用相同的等级分数呈现多个路由,只会呈现第一个匹配.如果需要在一组路由上有条件地呈现不同的标头,则在布局路由中执行此条件判断.

示例:

const PrivateRoutes = () => {
  const isAuthenticated = /* wherever isAuthenticated comes from */;

  if (lodar && !user && !streamStates && !totalProcessingLimit) {
    return <Spin indicator={antIcon} className="loader__full" />;
  }

  return isAuthenticated
    ? <Outlet />
    : <Navigate to="/login" replace />;
};
const Layout = () => {
  const user = /* wherever user comes from */;

  return (
    <>
      <CheckAuth applicableTo={USER_TYPES.SUPER_ADMIN} role={user?.role}>
        <Header />
      </CheckAuth>
      <CheckAuth applicableTo={USER_TYPES.ADMIN} role={user?.role}>
        <Header2 />
      </CheckAuth>
      <CheckAuth applicableTo={USER_TYPES.USER} role={user?.role}>
        <Header3 />
      </CheckAuth>

      <Outlet />
    </>
  );
};
<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="*" element={<Navigate to="/dashboard" />} />
    <Route element={<PrivateRoutes />}>
      <Route element={<Layout />}>
        <Route path="dashboard">
          <Route index element={<Mycomponent />} />
          ... other "/dashboard/..." routes
        </Route>

        ... other "Layout" routes
        <Route path="user-management" element={...} />
        <Route path="user-listing" element={...} />
      </Route>

      ... other protected routes
    </Route>

    ... other non-"Layout" routes
  </Routes>
</Router>

Javascript相关问答推荐

使用续集和下拉栏显示模型属性

使用复选框在d3.js多折线图中添加或删除线条

D3 Scale在v6中工作,但在v7中不工作

用JavaScript复制C#CRC 32生成器

html + java script!需要帮助来了解为什么我得到(无效的用户名或密码)

如何在 cypress 中使用静态嵌套循环

JS—删除对象数组中对象的子对象

如何将数组用作复合函数参数?

类构造函数忽略Reaction Native中的可选字段,但在浏览器中按预期工作

自定义图表工具提示以仅显示Y值

为什么在函数中添加粒子的速率大于删除粒子的速率?

匹配一个或多个可选重复的特定模式

如何在一个对象Java脚本中获取不同键的重复值?

在Java脚本中录制视频后看不到曲目

Next.js无法从外部本地主机获取图像

Clip-Path在网页浏览器(Mozilla、Edge、Chrome)上不能正常工作,但在预览版Visual Code Studio HTML、CSS、JS上却能很好地工作

重新呈现-react -筛选数据过多

ReferenceError:无法在初始化之前访问setData

限制数组中每个元素的长度,

如何在preLoad()中自定义p5.js默认加载动画?