react router v6

2种方式生成路由表

备注：
本案例，除了登录页所有页面都包含在 layout 组件里。layout 组件对应的路由为’/’

1. 对于任意错误路由，需跳转至 /not-found ，并展示组件
2. 默认路由为 ‘/’ 需跳转至 /meeting-room-list，并展示组件

方式1

<Routes>
<Route path="/" element={<PageLayout />}>
  {/* 注册 */}
  <Route path="/meeting-room-list" element={<MeetingRoomList />} /> -- 这里加index也不行。只能展示组件，并不会修改路由
  <Route path="/reservation-list" element={<ReservationList />} />
  <Route path="/not-found" element={<NotFound />} />
  {/* 错误地址的跳转 和 默认的跳转 */}
  <Route path="/*" element={<Navigate to="/not-found" replace />} />
  <Route path="/" element={<Navigate to="/meeting-room-list" replace />} />
</Route>
</Routes>

方式2

App组件

function App() {
  return <PageRoutes></PageRoutes>
}```

PageRoutes 组件
```bash
export const  layoutChildren =  [
  // 注册
  {
    // index:true,//不知道为啥不生效，不能自动跳转到这里
    path: "meeting-room-list",
    element: <MeetingRoomList />,
    icon: <HomeOutlined />,
  },
  {
    path: "reservation-list",
    element: <ReservationList />,
    icon: <UnorderedListOutlined />,
  },
  {
    path: "not-found",
    element:<NotFound />,
    hidden: true,
  },
  // 错误地址的跳转 和 默认的跳转
  {
    path: "/*",
    element:<Navigate to="/not-found" replace />,
    hidden: true,
  },
  {
    path: "/",
    element:<Navigate to="/meeting-room-list" replace />,
    hidden: true,
  },
];
// 此处必须是个组件
export default  function PageRoutes() {
  const routerObj= [
     {
      path: "/",
      element: <PageLayout />,
      children: layoutChildren,
    },

  ];
  return  useRoutes(routerObj)
}

原文地址：https://blog.csdn.net/qq_37766810/article/details/142434606

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！