深入 React Router v6：从基础配置到高级实践，实现高效前端路由

不会js
56 阅读9分钟

深入 React Router v6：从基础配置到高级实践，实现高效前端路由

大家好，今天我们来聊聊 React Router 这个前端开发中不可或缺的库。作为一个单页应用（SPA）的核心工具，它帮助我们管理页面跳转、参数传递和状态同步，让应用像多页网站一样流畅，却又避免了传统多页的刷新白屏问题。如果你还在为路由配置头疼，或者经常踩到 Hooks 规则的坑，接下来我们将一步步拆解底层逻辑，深入了解React Router v6

前端路由的演变：从后端主导到前端独立

回想早期的前端开发，我们常被称为“切图仔”——页面跳转完全依赖后端路由。用户点击链接，浏览器发送 HTTP 请求，后端渲染新页面返回，整个过程伴随着页面刷新和白屏，体验差劲。随着前后端分离的兴起，前端需要独立处理路由逻辑。这就是 React Router 等库的诞生背景。

两种路由模式：Hash vs Browser

React Router 提供了两种路由器：HashRouter 和 BrowserRouter。

HashRouter：URL 以 #/ 开头，比如 http://example.com/#/about。它利用 URL 的 hash 部分（锚点）来模拟路由变化，不触发页面刷新。

  • 优点：兼容性极好，即使在老浏览器或静态服务器上也能工作。

  • 缺点：URL 有点“丑”，且与后端路由容易冲突。但在一些企业级项目中，它是安全选择，因为它不会干扰服务器路由。

BrowserRouter：URL 干净，如 http://example.com/about。它依赖 HTML5 History API（pushState、replaceState 和 popstate 事件）来管理浏览器历史栈。

  • 优点：美观，与后端路由无缝衔接。

  • 缺点：需要服务器配置支持，否则刷新页面会 404。IE11 之前不兼容，但现在主流浏览器都支持。

在代码中，我们通常这样引入：

import { BrowserRouter as Router } from 'react-router-dom';

为什么用 as Router？纯属为了可读性，让代码更简洁。

底层逻辑：浏览器历史栈是一个先进后出（LIFO）的结构，每次跳转都 push 一个新 entry。replace 模式会替换当前 entry，避免历史记录堆积。

基本配置：构建路由树

React Router 的核心是 <Routes> 和 <Route>。<Routes> 包裹一组路由，<Route> 定义单个路径匹配。

看一个基础示例：

import { Routes, Route } from 'react-router-dom';

export default function RouterConfig() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />  // 通配符捕捉所有未匹配路径
    </Routes>
  );
}

这里，path 是匹配规则，element 是渲染组件。* 是通配符，用于 404 页面。

注意：路由匹配是“最优匹配”原则，从上到下扫描，找到第一个匹配的就渲染。底层用正则表达式解析路径，所以顺序很重要——把具体路径放上面，通配放下面。

在 App.jsx 中，我们包裹整个应用：

import { BrowserRouter as Router } from 'react-router-dom';
import Navigation from './components/Navigation';
import RouterConfig from './router';

export default function App() {
  return (
    <Router>
      <Navigation />
      <RouterConfig />
    </Router>
  );
}

这样，全局路由就生效了。

懒加载与 Suspense：优化性能，避免白屏

在大型应用中，加载所有组件会拖慢首屏。React 的 lazy 和 Suspense 完美解决这个问题。

示例：

import { lazy, Suspense } from 'react';
const Home = lazy(() => import('../pages/Home'));
const About = lazy(() => import('../pages/About'));

export default function RouterConfig() {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

lazy——按需加载，节省首屏时间

返回一个 Promise，只在路由匹配时加载组件。

动态 import（懒加载触发器） ：

我们来拆解一下


const Home = lazy(() => import('../pages/Home'));  // ← 这不是立即执行，而是返回 Promise
  • lazy 包装 import()，不执行，只返回一个“壳”函数。访问 / 时，才 import('../pages/Home')。
  • 底层：ES6 动态 import 是原生 Promise，状态：pending（加载中）→ fulfilled（加载完）。

Suspense 包裹它，提供 fallback UI（如加载动画）。

像这样：

image.png

import styles from './index.module.css';

export default function LoadingFallback() {
  return (
    <div className={styles.container}>
      <div className={styles.spinner}>
        <div className={styles.circle} />
        <div className={`${styles.circle} ${styles.inner}`} />
      </div>
      <p className={styles.text}>Loading...</p>
    </div>
  );
}

CSS 使用 keyframes 实现旋转和脉冲动画，生动形象地缓解用户等待焦虑。

底层逻辑：懒加载基于动态 import，Webpack 等打包工具会拆分成 chunk。Suspense 拦截 Promise 的 pending 状态，渲染 fallback，直到 resolve。

代码演示（React Fiber 源码简化）：

jsx

// React 伪代码（Suspense 内部）
function Suspense(props) {
  const promise = lazyComponent();  // Home 的 import Promise (pending)
  if (promise.state === 'pending') {
    return props.fallback;  // 渲染双圈旋转 spinner + "Loading..."
  }
  if (promise.state === 'fulfilled') {
    return promise.value;  // 替换为 <Home />
  }
}

动态路由：处理参数传递

动态路由用 : 定义参数，如 /user/:id。

示例：

const UserProfile = lazy(() => import('../pages/UserProfile'));

<Route path="/user/:id" element={<UserProfile />} />

在 UserProfile.jsx 中，用 useParams 获取：

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

export default function UserProfile() {
  const { id } = useParams();
  return <>UserProfile {id}</>;
}

访问 /user/123，id 为 "123"。

注意：参数可以多个，如 /product/:category/:id。底层是路径解析器，将 URL 拆解成对象。支持可选参数 /:id?。

类似地，ProductDetail.jsx：

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

export default function ProductDetail() {
  const { productId } = useParams();
  return <>ProductDetail {productId}</>;
}

动态路由（/path/:variable）的功能就是让路径动态匹配和传值，URL 不再是死的（如 /about 永远一个页），而是根据用户输入/数据生成无数变体。

如：

image.png 我们每个人的主页都有着不同的id，这就是动态路由的实际例子

嵌套路由与 Outlet：构建布局

嵌套路由让子页面共享父布局。用 <Outlet /> 渲染子组件。

示例：

const Product = lazy(() => import('../pages/product/index'));
const NewProduct = lazy(() => import('../pages/product/NewProduct'));
const ProductDetail = lazy(() => import('../pages/product/ProductDetail'));

<Route path="/products" element={<Product />}>
  <Route path="new" element={<NewProduct />} />
  <Route path=":productId" element={<ProductDetail />} />
</Route>

在 Product.jsx（index.jsx）：

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

export default function Product() {
  return (
    <>
      <h1>产品列表</h1>
      <Outlet />
    </>
  );
}

访问 /products/new，渲染 Product + NewProduct。

底层逻辑：路由树是递归的，匹配时从根到叶。Outlet 像占位符，注入子路由元素。

鉴权路由：保护私有页面

鉴权用包裹组件，如 ：

jsx

// ProtectRoute.jsx（你的代码已类似）
import { Navigate } from 'react-router-dom';

export default function ProtectRoute({ children }) {
  const isLoggedIn = localStorage.getItem('isLogin') === 'true';  // 判断方式

  if (!isLoggedIn) {
    // 未登录 → 重定向到登录页
    return <Navigate to="/login" replace />;  // replace 避免历史记录堆积
  }

  // 已登录 → 渲染受保护的内容
  return <>{children}</>;
}

使用方式（RouterConfig.jsx）：

jsx

<Route
  path="/pay"
  element={
    <ProtectRoute>
      <Pay />
    </ProtectRoute>
  }
/>

  • 访问 /pay：

    • 未登录 → 自动跳 /login
    • 已登录 → 显示 Pay 页面

这就是我们经常遇到的，想查看某个网页版应用的功能时，他会直接弹出登录提示

重定向路由：处理旧路径

用 <Navigate /> 重定向：

<Route path="/old-path" element={<Navigate replace to="/new-path" />} />

replace 替换历史记录，避免回退循环。

底层逻辑（History API + React Router）

  1. 不加 replace 的灾难：

    jsx

    <Route path="/old-path" element={<Navigate to="/new-path" />} />  // 默认 push

    • 流程：

      1. 访问 /old-path → match Route → 调用 history.push('/new-path')。
      2. 栈：[...旧栈, /old-path, /new-path]。
      3. 用户后退（pop）→ 回 /old-path → 又 push → 无限循环！

    • 控制台日志（加 console）：console.log(history) 见栈爆炸。

  2. 加 replace 救命：

    jsx

    <Route path="/old-path" element={<Navigate replace to="/new-path" />} />
    • replace: true → history.replaceState('/new-path', ...)覆盖 当前 entry。
    • 栈：[...旧栈, /new-path]（old-path 被吃掉）。
    • 后退安全跳到上上个页。

通配路由：优雅处理 404

<Route path="*" element={<NotFound />} />

在 NotFound.jsx：

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

const NotFound = () => {
  const navigate = useNavigate();
  useEffect(() => {
    setTimeout(() => navigate('/'), 6000);
  }, []);
  return <>NotFound</>;
};

自动跳转首页。

优化建议：加用户反馈，如“页面不存在，6秒后跳转”。

导航组件：实现 active 高亮

封装 NavItem 组件：

function NavItem({ to, children }) {
  const resolved = useResolvedPath(to);
  const match = useMatch({ path: resolved.pathname, end: true });
  return (
    <li>
      <Link to={to} className={match ? 'active' : ''}>
        {children}
      </Link>
    </li>
  );
}

使用：

<ul>
  <NavItem to="/">Home</NavItem>
  <NavItem to="/about">About</NavItem>
  {/* ... */}
</ul>

核心操作就是：

  1. 用 useResolvedPath(to) 先把传入的 to（可能是相对路径、绝对路径、对象形式）解析成一个完整的、绝对的路径对象（Path object）。
  2. 然后把这个解析后的绝对路径（resolved.pathname）传给 useMatch()，让它判断当前浏览器 URL 是否匹配这个路径。
  3. 如果匹配成功（match 不为 null），就给这个 加 active 类，实现高亮。

我们来深入解析一下：

1. useResolvedPath(to) 返回的是什么？

它返回一个 Path 对象（类型是 { pathname: string, search: string, hash: string }），这是一个绝对路径（从根 / 开始算起），是根据当前路由上下文 + 你传入的 to 计算出来的。

  • 绝对路径：意思是无论 to 是相对的（./details、../list、details）还是绝对的（/about），最终得到的 pathname 都是从根开始的完整路径（以 / 开头）。
  • 它考虑了当前 URL 的上下文（比如你在 /users/123/profile 页面），所以能正确处理相对路径。

官方例子（React Router 文档）：

jsx

// 当前 URL 是 /dashboard/profile

const resolved = useResolvedPath("../accounts");
// 返回: { pathname: "/dashboard/accounts", search: "", hash: "" }

const resolved2 = useResolvedPath("/settings");
// 返回: { pathname: "/settings", search: "", hash: "" }

const resolved3 = useResolvedPath("details");
// 返回: { pathname: "/dashboard/profile/details", search: "", hash: "" }

一句话总结：

useResolvedPath(to) 的作用就是：把任何形式的 to（相对/绝对/对象）转换成当前上下文下的绝对路径对象，让后续的匹配逻辑能用一个统一的、从根开始的路径来比较。

2. 既然useResolvedPath(to)已经拿到了pathname，那为什么还要useMatch?

如果你直接写 resolved.pathname === to，绝大多数情况下都会失败，因为：

  • 绝大多数开发者写的 to 都是相对路径（./child、details、../list）或简写（不带 / 开头的）
  • 而 resolved.pathname永远是绝对路径（以 / 开头 + 基于当前路径计算完整路径）

所以 resolved.pathname === to 这个比较几乎永远是 false（除非你每次都强制写成绝对路径 /xxx）

正确做法（为什么必须用 useMatch）

jsx

const resolved = useResolvedPath(to);           // 先转成绝对路径
const match = useMatch({
  path: resolved.pathname,                      // 喂给 useMatch 的必须是这个绝对路径
  end: true                                     // 或 false，看需求
});

useMatch 内部会把 path 当成匹配模式去和当前 location.pathname 做匹配，而不是简单的字符串相等。它支持：

  • 相对路径（因为你先 resolve 了）
  • 动态参数 :id（能匹配 /users/123）
  • 前缀匹配（end: false）
  • 通配符 *

注意：useResolvedPath 解析相对/绝对路径为绝对对象。useMatch 检查当前 URL 是否匹配，支持 end: true（精确匹配）或 false（前缀匹配，用于父子高亮）。

CSS（index.css）：
```css
.active { color: red; }

单页应用的底层原理

SPA 不是真“单页”，而是动态替换 DOM。路由变化触发 popstate 事件，Router 监听并渲染新组件。History API 管理栈，避免刷新。

单页应用（SPA）点链接时发生了什么？

以 React + React Router 为例：

  1. 用户点击一个 （不是普通 < a > ）

  2. React Router 拦截点击事件，阻止默认的浏览器跳转行为（preventDefault）

  3. React Router 调用 History API 中的 pushState 或 replaceState：

    JavaScript

    history.pushState({ }, '', '/about');
    • URL 变了（浏览器地址栏变成 /about）
    • 但浏览器没有发起任何 HTTP 请求
    • 当前页面 HTML 没有被丢弃

  4. React Router 监听到 URL 变化（通过 popstate 事件或自己内部状态更新）

  5. 根据新的 URL 重新匹配路由（ → 找到对应的 ）

  6. React 只把新的组件渲染到 DOM 树中：

    • 旧组件被卸载（unmount）
    • 新组件被挂载（mount）
    • 只更新需要变化的那部分 DOM（React 的 diff 算法）

  7. 整个过程发生在浏览器内存里，没有网络请求，没有丢弃整个页面

结果：用户几乎感觉不到切换（可能只有 16ms 内的局部更新），没有白屏。

一句话总结 SPA 的原理：

SPA 把“页面切换”从“浏览器请求新 HTML + 完整刷新” 变成了 “浏览器内存里切换组件 + 局部 DOM 更新” 。

总结与实践建议

React Router 让前端路由从混乱到优雅。通过基础配置、懒加载、各种路由类型和 Hooks，我们构建高效应用。

avatar
文章
阅读
粉丝