前言
随着单页面应用（SPA）的普及，前端路由成为开发中不可或缺的一部分，而 React Router 作为 React 官方推荐的路由库，提供了强大的功能和灵活性。本文将从基础到进阶，带你全面掌握 React Router。
一、初识 React Router
1. 安装 React Router
在项目中安装 React Router DOM：
npm install react-router-dom
2. 创建路由结构
React Router 提供多种路由创建方式，其中推荐使用 createBrowserRouter 创建基于浏览器的路由。
// src/router/index.jsx
import { createBrowserRouter } from "react-router-dom";
import Home from "../views/Home";
import Login from "../views/Login";const router = createBrowserRouter([{path: '/',element: <Home />,},{path: '/login',element: <Login />,}
]);export default router;
3. 路由挂载
使用 RouterProvider 挂载路由：
// src/App.jsx
import { RouterProvider } from "react-router-dom";
import router from "./router";
import Header from "./components/Header";
import Footer from "./components/Footer";function App() {return (<div className="app"><Header /><RouterProvider router={router} /><Footer /></div>);
}export default App;
4. 嵌套路由
在父路由组件中使用 <Outlet /> 渲染子路由：
// src/views/Home.jsx
import { Outlet } from "react-router-dom";export default function Home() {return (<div><h1>Home</h1><Outlet /></div>);
}
在路由配置中定义子路由：
// src/router/index.jsx
{path: '/home',element: <Home />,children: [{path: 'dashboard',element: <Dashboard />,},],
}
5. 配置 404 页面
为未匹配的路由配置错误页面：
// src/views/ErrorPage.jsx
export default function ErrorPage() {return <h1>Page Not Found</h1>;
}
在路由配置中使用通配符 *：
{path: '*',element: <ErrorPage />,
}
二、路由跳转
1. 使用 <Link />
<Link to="/dashboard">Go to Dashboard</Link>
2. 使用 <NavLink />
<NavLink /> 会为匹配的路由自动添加 active 类名：
<NavLink to="/dashboard" activeClassName="active">Dashboard</NavLink>
自定义类名或样式：
<NavLink to="/dashboard" className={({ isActive }) => isActive ? 'custom-active' : ''}>Dashboard</NavLink>
3. 编程式跳转
使用 useNavigate：
import { useNavigate } from "react-router-dom";function LoginButton() {const navigate = useNavigate();const handleLogin = () => {navigate('/home');};return <button onClick={handleLogin}>Login</button>;
}
三、传递参数
1. 使用 searchParams（Query 参数）
设置参数：
navigate('/login?user=admin&role=admin');
获取参数：
import { useSearchParams } from "react-router-dom";function Login() {const [searchParams] = useSearchParams();const user = searchParams.get('user');const role = searchParams.get('role');return <div>User: {user}, Role: {role}</div>;
}
2. 使用 params（路径参数）
设置路径参数：
{path: '/profile/:id',element: <Profile />,
}
获取参数：
import { useParams } from "react-router-dom";function Profile() {const { id } = useParams();return <div>Profile ID: {id}</div>;
}
四、进阶功能
1. 数据预加载（Loader）
在路由配置中使用 loader：
{path: '/data',element: <DataPage />,loader: async () => {const response = await fetch('/api/data');return response.json();},
}
在组件中使用 useLoaderData：
import { useLoaderData } from "react-router-dom";function DataPage() {const data = useLoaderData();return <div>{JSON.stringify(data)}</div>;
}
2. 懒加载（Lazy Loading）
使用 React.lazy 和 Suspense 实现组件的按需加载：
import React, { lazy, Suspense } from "react";const LazyComponent = lazy(() => import("../views/LazyComponent"));{path: '/lazy',element: (<Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense>),
}
五、总结
通过本文，我们系统地梳理了 React Router 的基本用法和进阶功能。无论是创建路由、路由跳转还是参数传递，React Router 都提供了丰富且易用的 API。在实际项目中，合理配置路由和组件加载策略，可以显著提升应用的性能与用户体验。