react routerv6子路由

### 子路由配置与使用 在 React Router v6 中，子路由可以通过 `<Route>` 组件的 `element` 属性以及嵌套结构来定义。为了创建父子关系的路由，可以在父组件内部定义多个子 `<Route>` 元素[^1]。 下面是一个简单的例子展示如何在一个应用中设置子路由： ```javascript import React from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; function Home() { return <h2>Home</h2>; } function About() { return ( <div> <h2>About Us</h2> {/* 定义子链接 */} <ul> <li><Link to="/about/history">History</Link></li> <li><Link to="/about/team">Team</Link></li> </ul> {/* 嵌套路由 */} <Routes> <Route path="history" element={<AboutHistory />} /> <Route path="team" element={<AboutTeam />} /> </Routes> </div> ); } function AboutHistory() { return <p>We've been making things for a long time.</p>; } function AboutTeam() { return <p>The team behind our product.</p>; } ``` 在这个案例里，`<About />` 是父级组件，在其 JSX 结构内包含了两个子路径 `/about/history` 和 `/about/team` 的定义。当访问这些 URL 地址时，相应的子页面会被渲染出来[^4]。 对于更复杂的场景，如果希望根路径 (`/`) 下有默认显示的内容，则可以利用 index 路径特性: ```javascript <Routes> <Route path="/" element={<Layout />}> <Route index element={<HomePage />} /> <Route path="users/*" element={<UsersPage />} /> ... </Route> </Routes> ``` 这里设置了当用户访问根目录时，默认呈现主页内容，并且支持进一步的深层嵌套匹配。 #### 动态加载子路由 针对基于权限或其他条件动态加载的情况，可以根据实际情况构建路由数组并传递给 `<Routes>` 或者直接操作 DOM 来更新路由列表。一种常见的做法是在应用程序启动初期获取必要的数据之后再初始化路由配置[^3]。 例如，假设有一个函数可以从服务器端拉取用户的可访问资源列表作为 JSON 数据返回，那么就可以依据此信息生成对应的路由项集合用于后续导航逻辑处理。 ```typescript // 获取到的数据可能是这样的形式 [{path: '/admin', component: AdminPanel}, ... ] const userAccessiblePaths = await fetchUserPermissions(); // 将上述数据转换为适合 react router 使用的形式 const dynamicRoutes = userAccessiblePaths.map(({ path, Component }) => ({ path, element: <Component />, })); ``` 最后将这个 `dynamicRoutes` 数组传入到 `<Routes>` 中即可完成动态路由注册过程。