React 路由
React 路由是 React 应用中实现页面导航和组件动态渲染的核心工具，主要通过 react-router 库实现（通常使用 react-router-dom 进行 Web 开发）。以下是对 React 路由的中文讲解，涵盖核心概念、基本使用和常见场景，尽量简洁清晰。
1. 什么是 React 路由？
React 路由允许在单页应用（SPA）中根据 URL 动态渲染不同的组件，而无需实际刷新页面。它通过监听浏览器 URL 变化，匹配对应的组件并渲染，实现类似多页应用的导航体验。
2. 核心库：react-router-dom
react-router-dom 是 React 路由的 Web 版本，提供以下关键组件：
- BrowserRouter：基于 HTML5 history API 的路由容器，推荐用于现代浏览器。
- Routes 和 Route：定义路由规则，匹配 URL 和组件。
- Link 和 NavLink：用于创建导航链接，避免页面刷新。
- useNavigate：编程式导航的 Hook，用于跳转。
- Outlet：用于渲染嵌套路由的子组件。
3. 安装
首先安装 react-router-dom：
npm install react-router-dom4. 基本使用
以下是一个简单的 React 路由示例：
示例代码
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
// 页面组件
function Home() {
return <h2>首页</h2>;
}
function About() {
return <h2>关于我们</h2>;
}
function NotFound() {
return <h2>404 - 页面不存在</h2>;
}
// 主应用
function App() {
return (
<BrowserRouter>
{/* 导航链接 */}
<nav>
<Link to="/">首页</Link> | <Link to="/about">关于</Link>
</nav>
{/* 路由配置 */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} /> {/* 404 路由 */}
</Routes>
</BrowserRouter>
);
}
export default App;说明
<BrowserRouter>：包裹整个应用，提供路由上下文。<Link>：生成导航链接，点击后改变 URL 但不刷新页面。<Routes>和<Route>：定义路径和对应组件，path="*"匹配未定义路由（404）。- 访问
/渲染Home，访问/about渲染About。
5. 动态路由
React 路由支持动态路径参数，例如 /users/:id。
示例
function User() {
const { id } = useParams(); // 获取 URL 参数
return <h2>用户 ID: {id}</h2>;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/users/:id" element={<User />} />
</Routes>
</BrowserRouter>
);
}- useParams Hook：获取动态参数，如
/users/123中的id为123。
6. 编程式导航
使用 useNavigate Hook 实现代码控制的页面跳转。
示例
import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
const handleLogin = () => {
// 假设登录成功
navigate('/dashboard'); // 跳转到仪表盘
};
return <button onClick={handleLogin}>登录</button>;
}7. 嵌套路由
嵌套路由允许在父组件中渲染子路由，使用 <Outlet> 占位。
示例
function Dashboard() {
return (
<div>
<h2>仪表盘</h2>
<nav>
<Link to="profile">个人资料</Link> | <Link to="settings">设置</Link>
</nav>
<Outlet /> {/* 子路由渲染位置 */}
</div>
);
}
function Profile() {
return <h3>个人资料页面</h3>;
}
function Settings() {
return <h3>设置页面</h3>;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
</BrowserRouter>
);
}- 访问
/dashboard/profile时，Dashboard渲染并在<Outlet>位置显示Profile。
8. 路由守卫
实现权限控制或重定向，常用 Navigate 组件或 useNavigate。
示例：简单权限控制
function PrivateRoute({ children }) {
const isAuthenticated = false; // 模拟未登录
return isAuthenticated ? children : <Navigate to="/login" />;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route
path="/dashboard"
element={
<PrivateRoute>
<Dashboard />
</PrivateRoute>
}
/>
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>
);
}- 未登录用户访问
/dashboard会重定向到/login。
9. 常见问题
- 如何处理 404 页面？
使用<Route path="*" element={<NotFound />} />捕获未匹配的路由。 - 如何传递参数给路由？
使用动态路由（如:id）或查询参数（如?key=value），通过useParams或useSearchParams获取。 - 如何实现路由动画？
使用第三方库如framer-motion，结合路由切换添加过渡效果。
10. 进阶：懒加载路由
为优化性能，可使用 React 的 lazy 和 Suspense 实现路由懒加载。
示例
import { lazy, Suspense } from 'react';
const Home = lazy(() => import('./Home'));
function App() {
return (
<BrowserRouter>
<Suspense fallback={<div>加载中...</div>}>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Suspense>
</BrowserRouter>
);
}11. 注意事项
- 版本兼容：本文基于
react-router-domv6，v5 和 v6 API 差异较大，注意版本。 - 性能优化：避免嵌套路由过深，使用懒加载减少初始加载时间。
- SEO：单页应用需配合服务器端渲染（如 Next.js）优化搜索引擎抓取。
12. 资源
- 官方文档：https://reactrouter.com/
- 中文社区资源：搜索 “React Router 中文教程” 或参考掘金、知乎等平台文章。