React Router v6 详解

引言

React Router v6 是 React 应用中最流行的路由库，带来了更简洁的 API 和更好的 TypeScript 支持。本文将深入讲解 v6 的核心特性和实用技巧。

核心概念

1. 路由配置

v6 使用 createBrowserRouter 创建路由配置，更加直观：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '/users/:id',
    element: <UserDetail />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

2. 动态参数处理

使用 useParams 获取路由参数：

import { useParams } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams();
  return <div>用户 ID: {id}</div>;
}

3. 查询参数处理

使用 useSearchParams 处理 URL 查询字符串：

import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q');
  
  const handleSearch = (newQuery) => {
    setSearchParams({ q: newQuery });
  };
  
  return <div>搜索：{query}</div>;
}

进阶配置

4. 嵌套路由

使用 Outlet 组件渲染子路由：

import { Outlet, Link } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <nav>
        <Link to="stats">统计</Link>
        <Link to="settings">设置</Link>
      </nav>
      <Outlet />
    </div>
  );
}

// 路由配置
{
  path: '/dashboard',
  element: <Dashboard />,
  children: [
    { path: 'stats', element: <Stats /> },
    { path: 'settings', element: <Settings /> },
  ],
}

5. 懒加载优化

使用 React.lazy 和 Suspense 实现代码分割：

import { Suspense, lazy } from 'react';

const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Suspense>
  );
}

导航守卫

6. 权限守卫

创建 ProtectedRoute 组件保护需要登录的页面：

import { Navigate, Outlet } from 'react-router-dom';

function ProtectedRoute({ isAllowed, redirectPath = '/login' }) {
  if (!isAllowed) {
    return <Navigate to={redirectPath} replace />;
  }
  return <Outlet />;
}

// 使用
{
  element: <ProtectedRoute isAllowed={isLoggedIn} />,
  children: [
    { path: '/profile', element: <Profile /> },
    { path: '/settings', element: <Settings /> },
  ],
}

7. 路由确认

使用 useBlocker 在用户离开前确认：

import { useBlocker } from 'react-router-dom';

function FormPage() {
  const blocker = useBlocker(({ currentLocation, nextLocation }) => {
    return hasUnsavedChanges && currentLocation.pathname !== nextLocation.pathname;
  });
  
  if (blocker.state === 'blocked') {
    if (window.confirm('有未保存的更改，确定要离开吗？')) {
      blocker.proceed();
    } else {
      blocker.reset();
    }
  }
  
  return <form>...</form>;
}

编程式导航

8. useNavigate 跳转

使用 useNavigate 进行编程式导航：

import { useNavigate } from 'react-router-dom';

function LoginPage() {
  const navigate = useNavigate();
  
  const handleLogin = async (credentials) => {
    const success = await login(credentials);
    if (success) {
      navigate('/dashboard', { replace: true });
    }
  };
  
  const handleBack = () => {
    navigate(-1); // 返回上一页
  };
  
  return <form onSubmit={handleLogin}>...</form>;
}

总结

React Router v6 提供了更现代、更简洁的路由解决方案：

• ✅ 使用 createBrowserRouter 简化配置
• ✅ useParams 和 useSearchParams 处理参数
• ✅ Outlet 实现嵌套路由
• ✅ React.lazy + Suspense 优化加载
• ✅ ProtectedRoute 实现权限控制
• ✅ useBlocker 防止意外离开
• ✅ useNavigate 编程式导航

掌握这些核心 API，可以构建出结构清晰、性能优秀的 React 应用路由系统。