React Router 深入指南：从入门到进阶

前言

随着单页面应用（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。在实际项目中，合理配置路由和组件加载策略，可以显著提升应用的性能与用户体验。