React Router 嵌套路由详解：构建复杂应用布局
React Router 的嵌套路由功能允许在路由内部定义更多路由，从而创建复杂、动态的应用布局。这对于构建包含子路由模块的应用（如仪表盘、用户配置或管理面板）至关重要。嵌套路由有助于建立分层 URL 结构，每个路由在其父组件内呈现特定内容。
如何实现嵌套路由
在 React Router 中配置嵌套路由，需要在父路由中使用 <Routes> 和 <Route> 组件。
步骤：
- 父路由: 定义父组件的路由。
-
子路由: 在父组件内，通过
<Route>组件定义子路由，处理子路径。 -
渲染子组件: 父组件需包含
<Outlet>组件，作为渲染子组件的占位符。
嵌套路由示例
以下示例展示了父路由和嵌套路由的定义：
<code class="javascript">import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';
// 父组件
const Dashboard = () => {
return (
<div>
<h2>仪表盘</h2>
<nav>
<ul>
<li><Link to="profile">个人资料</Link></li>
<li><Link to="settings">设置</Link></li>
</ul>
</nav>
<hr />
<Outlet /> {/* 子路由内容渲染在此处 */}
</div>
);
};
// 子组件
const Profile = () => <h3>个人资料页面</h3>;
const Settings = () => <h3>设置页面</h3>;
const App = () => {
return (
<BrowserRouter>
<Routes>
{/* 父路由 */}
<Route path="dashboard" element={<Dashboard />}>
{/* 嵌套路由 */}
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
</BrowserRouter>
);
};
export default App;</code>
说明：
-
Dashboard组件是父路由，渲染导航链接和<Outlet>组件。<Outlet>用作子路由组件的渲染位置。 -
Profile和Settings组件是嵌套在Dashboard内的子路由。 -
<Link>组件用于导航，点击链接会更新 URL 并渲染相应的子组件（例如/dashboard/profile或/dashboard/settings）。 - 父路由中的
<Route>和<Route>组件定义了嵌套路由，确保 URL 匹配/dashboard/profile或/dashboard/settings时，渲染正确的组件。
带路径参数的嵌套路由
嵌套路由也可以使用动态参数：
<code class="javascript">import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom';
const Dashboard = () => {
// ... (same as before)
};
const Profile = () => {
const { id } = useParams(); // 从 URL 获取 'id' 参数
return <h3>用户 {id} 的个人资料页面</h3>;
};
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="dashboard" element={<Dashboard />}>
{/* 带路径参数的嵌套路由 */}
<Route path="profile/:id" element={<Profile />} />
</Route>
</Routes>
</BrowserRouter>
);
};
export default App;</code>
说明：
-
Profile组件从 URL (/dashboard/profile/:id) 获取动态参数id。 -
useParams()hook 用于访问动态参数。 - 父路由
/dashboard下的子路由可处理多个用户资料页面，URL 变化（例如/dashboard/profile/1）时，Profile组件会显示相应用户的id。
默认嵌套路由
React Router 支持设置默认嵌套路由，当没有匹配到特定子路由时，渲染默认组件：
<code class="javascript">import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';
// ... (Dashboard, Profile, Settings components)
const DashboardHome = () => <h3>欢迎来到仪表盘</h3>;
const App = () => {
return (
<BrowserRouter>
<Routes>
{/* 父路由，包含默认子路由 */}
<Route path="dashboard" element={<Dashboard />}>
<Route index element={<DashboardHome />} /> {/* 默认路由 */}
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
</BrowserRouter>
);
};
export default App;</code>
说明：
-
index属性的路由定义了默认组件，当访问/dashboard但没有指定子路径时渲染。 - 访问
/dashboard/profile或/dashboard/settings时，会显示对应的组件。
总结
React Router 的嵌套路由是构建复杂 UI 的关键功能，它允许将应用拆分成更小、更易于管理的组件，同时保持导航的简洁和动态性。 通过 <Outlet> 组件，可在父组件中渲染子路由，并使用动态参数、默认路由和嵌套 URL 结构定制路由。
