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