oa系统哪个比较好_html自学怎么入门_百度一下你就知道官网网页_成全视频免费观看在线看

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