我们可以在reactjs中创建多个同名的路由吗

Question

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

超级管理员.js

return (
  <div>
    <Header1 />
    <Outlet />
  </div>
)

admin.js

return (
  <div>
    <Header2 />
    <Outlet />
  </div>
)

用户.js

return (
  <div>
    <Header3 />
    <Outlet />
  </div>
)

在我的所有父组件（即 SuperadminRoute、Admin、UserRoute）中，我们有不同的标头，这就是为什么我不想为通用路由创建单独的容器，因为我必须为标头设置条件。那么是否可以创建具有相同名称的路由，并且登录的角色应该重定向到他们的路由？

Answer 1

您无法渲染具有相同排名分数的多条路线，只会渲染第一个匹配的路线。如果您需要在一组路由上有条件地渲染不同的标头，请在布局路由中执行此条件检查。

示例：

const DashboardLayout = () => {
  const role = /* wherever the role comes from */;

  let Header;

  switch(role) {
    case "superadmin":
      Header = Header1;
      break;

    case "admin":
      Header = Header2;
      break;

    case "user":
    default:
      Header = Header3;
      break;

  }

  return (
    <div>
      <Header />
      <Outlet />
    </div>
  );
};

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="*" element={<Navigate to="/dashboard" />} />
    <Route path="/dashboard" element={<DashboardLayout />}>
      <Route index element={<Mycomponent />} />
      ...
    </Route>
  </Routes>
</Router>