React 动态路由详解
React 动态路由允许根据数据或用户交互动态调整路由，从而构建更灵活、更可扩展的应用。这对于无法预先定义所有路由的应用尤其重要，例如，页面内容依赖 API 数据，或路由取决于应用状态和操作的应用。
React 动态路由工作机制
React Router 是 React 应用中实现路由的首选库。它简化了动态路由的实现，允许路由路径和组件根据数据或条件变化。
核心概念
-
动态路由参数: 使用动态占位符（例如
/user/:userId中的:userId）定义路由，这些占位符会在运行时被实际值替换。 -
编程式导航: 使用
useNavigate钩子或<Navigate>组件，根据应用逻辑或操作动态跳转到不同路由。 -
条件路由: 基于应用状态（例如用户登录状态或数据可用性）有条件地渲染路由。
-
延迟加载路由: 按需加载路由，仅在需要时加载组件，提升应用性能。
React 动态路由示例
以下示例演示如何使用动态参数创建路由，并根据 URL 条件渲染组件。
分步示例：
- 带参数的基本动态路由:
<code class="javascript">import React from 'react';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
const UserProfile = () => {
const { userId } = useParams();
return <h2>用户资料：{userId}</h2>;
};
const App = () => {
return (
<BrowserRouter>
<nav>
<ul>
<li><Link to="/user/1">用户 1</Link></li>
<li><Link to="/user/2">用户 2</Link></li>
</ul>
</nav>
<Routes>
<Route path="/user/:userId" element={<UserProfile />} />
</Routes>
</BrowserRouter>
);
};
export default App;</code>
说明: UserProfile 组件使用 useParams 获取 URL 中的 userId 参数。点击链接会动态跳转到 /user/1 或 /user/2，并渲染对应用户资料。
- 使用
useNavigate钩子进行编程式路由:
<code class="javascript">import React from 'react';
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
const Home = () => {
const navigate = useNavigate();
const goToUserProfile = (id) => {
navigate(`/user/${id}`);
};
return (
<div>
<h2>首页</h2>
<button onClick={() => goToUserProfile(1)}>前往用户 1</button>
<button onClick={() => goToUserProfile(2)}>前往用户 2</button>
</div>
);
};
const UserProfile = ({ userId }) => {
return <h2>用户资料：{userId}</h2>;
};
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user/:userId" element={<UserProfile />} />
</Routes>
</BrowserRouter>
);
};
export default App;</code>
说明: Home 组件使用 useNavigate 在点击按钮时动态跳转到不同用户资料页面。UserProfile 组件使用 useParams 接收 userId 并渲染对应资料。
- 条件动态路由:
<code class="javascript">import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
const PrivateRoute = ({ isAuthenticated, children }) => {
return isAuthenticated ? children : <Navigate to="/login" />;
};
const Dashboard = () => <h2>仪表盘 - 仅限登录用户访问</h2>;
const Login = () => <h2>登录页面</h2>;
const App = () => {
const isAuthenticated = false; // 修改此值进行测试
return (
<BrowserRouter>
<Routes>
<Route path="/login" element={<Login />} />
<Route element={<PrivateRoute isAuthenticated={isAuthenticated}><Dashboard /></PrivateRoute>} path="/dashboard" />
</Routes>
</BrowserRouter>
);
};
export default App;</code>
说明: PrivateRoute 组件是一个高阶组件，检查用户是否已登录。未登录用户会被重定向到登录页面。仪表盘路由仅在 isAuthenticated 为 true 时才可访问。
- 延迟加载路由 (代码分割):
<code class="javascript">import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./Home'));
const Dashboard = lazy(() => import('./Dashboard'));
const App = () => {
return (
<BrowserRouter>
<Suspense fallback={<div>加载中...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</Suspense>
</BrowserRouter>
);
};
export default App;</code>
说明: Home 和 Dashboard 组件使用 lazy 进行延迟加载，仅在访问对应路由时加载。加载组件期间，显示加载提示。
动态路由优势
- 性能: 延迟加载减少了初始加载时间。
- 灵活性: 轻松处理各种用户驱动的导航。
- 可扩展性: 方便管理复杂的路由逻辑，尤其适用于大型 SPA 或用户流程复杂的应用。
总结
React 动态路由使应用更灵活、交互性更强。通过动态路由参数、编程式导航、条件路由和延迟加载，可以构建功能强大、可扩展的 React 应用，并根据用户交互或应用状态进行调整。React Router 是实现这些功能的强大工具。
