不再是切图仔，router拯救了前端工程师

在单页应用成为主流的今天，前端路由早已不是"有无"的问题，而是整个应用架构的基石。它让页面切换无需刷新，提升了用户体验的流畅性；它将 URL 与组件状态解耦，使前端真正具备了"导航"能力。React Router 不仅是一套跳转机制，更是连接用户行为、历史管理、权限控制和代码分割的核心枢纽，为现代前端工程化提供了不可或缺的支撑

一、单页应用中的路由：我们为什么需要它？

在传统的多页应用（MPA）中，每次页面跳转都会向服务器发起一次全新的 HTTP 请求，浏览器加载整个 HTML 页面。这种方式简单直接，但体验较差：页面刷新、白屏、资源重复加载。

随着 Web 应用复杂度提升，单页应用（SPA） 成为主流。它的特点是：

整个应用只有一个 HTML 文件；
页面切换由前端控制，不重新请求完整页面；
用户感知更流畅，接近原生应用体验。

而实现这一切的关键技术之一，就是------前端路由。

二、前端路由的本质：URL 变化 ≠ 页面刷新

前端路由的核心目标是：当 URL 改变时，不刷新页面，而是由 JavaScript 决定渲染哪个组件。

这依赖于现代浏览器提供的两个能力：

HTML5 History API （如 pushState, replaceState）
hash 变化监听 （window.onhashchange）

react-router-dom 正是基于这些底层能力封装而成的路由库。

三、两种路由模式的选择：Browser 与 Hash

1. Browser 路由（推荐）

js 复制代码

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

使用原生的 History 接口，URL 看起来干净美观：

arduino 复制代码

https://example.com/about
https://example.com/user/123

但它有一个前提：后端必须配合 。因为如果用户直接访问 /about，服务器会尝试查找对应的 /about 路径资源。如果没有配置 fallback 到 index.html，就会返回 404。

常见解决方案：Nginx 或 Node.js 服务设置所有未知路径都返回 index.html。

兼容性方面，IE11 及以上支持良好，现代项目基本都可以使用。

2. Hash 路由（兼容性优先）

js 复制代码

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

URL 中带 #：

bash 复制代码

https://example.com/#/about
https://example.com/#/user/123

# 后面的内容不会发送给服务器，所以无论怎么变化，后端都能正确返回首页。因此不需要额外配置，适合静态托管场景。

缺点是 URL 不够美观，且对 SEO 略有影响。

✅ 实际开发建议：优先使用 BrowserRouter，只有在无法控制服务器配置时才退回到 HashRouter。

四、基础结构搭建：App 与路由分离

我们来看主入口文件 App.jsx：

jsx 复制代码

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

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

这里做了合理的职责划分：

Navigation：导航栏，负责链接跳转；
RouterConfig：集中管理所有路由规则；
App：作为容器，组织整体布局。

这种分层方式让路由配置变得可维护、易测试。

五、路由配置详解：从普通路由到嵌套路由

1. 普通路由：最简单的匹配

jsx 复制代码

<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />

这是最基本的用法。当 URL 匹配 path 时，就在当前位置渲染 element 对应的组件。

注意：Route 必须放在 Routes 组件内，它是用来做"排他性匹配"的------只会渲染第一个匹配成功的路由。

2. 动态路由：传递参数

jsx 复制代码

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

:id 是动态段，表示任意值。比如：

/user/123
/user/abc

都可以匹配。组件内部可以通过 useParams() 获取参数：

js 复制代码

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

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

这是构建详情页、个人中心等页面的基础。

3. 嵌套路由：父子结构的自然表达

jsx 复制代码

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

这是一种非常优雅的设计。Product 是父组件，它可以包含自己的布局（如标题、筛选栏），子路由在其内部通过 <Outlet> 渲染。

例如：

jsx 复制代码

// pages/Product.jsx
import { Outlet } from 'react-router-dom';

export default function Product() {
  return (
    <div>
      <h2>商品列表</h2>
      <Outlet /> {/* 子路由组件在这里渲染 */}
    </div>
  );
}

这样做的好处是：

共享父级状态或 UI；
路由层级清晰，符合直觉；
避免重复代码。

4. 通配路由：兜底处理 404

jsx 复制代码

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

* 表示匹配任何未被前面路由捕获的路径，通常用于展示 404 页面。

顺序很重要：必须放在最后，否则会拦截所有请求。

5. 重定向：旧路径迁移或默认跳转

jsx 复制代码

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

当你重构项目、调整路径结构时，可以用 Navigate 实现平滑过渡。

其中 replace 的作用是：替换当前历史记录，而不是压入新记录。这样用户点击"返回"时，不会又回到那个无效的旧路径。

六、性能优化：懒加载 + 加载提示

大型项目中，不可能一开始就加载所有页面代码。我们需要按需加载。

使用 `lazy` 和 `Suspense` 实现代码分割

js 复制代码

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

lazy 接收一个动态导入函数，Webpack 会自动为此生成独立的 chunk 文件，在需要时才加载。

但异步加载需要时间，期间页面不能空白。于是我们用 Suspense 提供占位内容：

jsx 复制代码

<Suspense fallback={<LoadingFallback />}>
  <Routes>
    {/* 所有 lazy 组件都包裹在此处 */}
  </Routes>
</Suspense>

LoadingFallback 可以是一个简单的 loading 动画或骨架屏。

注意：Suspense 必须包裹可能触发异步加载的组件，即使它们是深层嵌套的。

七、导航高亮：让用户知道"我在哪"

常见的需求是：当前访问的页面，对应菜单项要有特殊样式（如高亮）。

我们可以利用 react-router-dom 提供的 useMatch 和 useResolvedPath 来判断是否激活：

js 复制代码

// components/Navigation.jsx
import { Link, useResolvedPath, useMatch } from 'react-router-dom';

function Navigation() {
  const isActive = (to) => {
    const resolvedPath = useResolvedPath(to);
    const match = useMatch({
      path: resolvedPath.pathname,
      end: true, // 完全匹配
    });
    return match ? 'active' : '';
  };

  return (
    <nav>
      <ul>
        <li>
          <Link to="/" className={isActive('/')}>Home</Link>
        </li>
        <li>
          <Link to="/about" className={isActive('/about')}>About</Link>
        </li>
      </ul>
    </nav>
  );
}

关键点说明：

useResolvedPath(to) 解析路径字符串为标准格式；
useMatch({ path, end }) 判断当前是否匹配该路径；
end: true 表示完全匹配，防止 /user/123 被 /user 错误命中；

这个模式可以封装成通用工具函数，在多个导航栏中复用。

八、路由守卫：登录鉴权的实现

某些页面（如支付页）必须登录后才能访问。这就是所谓的"路由守卫"。

我们通过一个包装组件来实现：

js 复制代码

// components/ProtectRouter.jsx
import { Navigate } from 'react-router-dom';

export default function ProtectRouter({ children }) {
  const isLogin = localStorage.getItem('isLogin') === 'true';
  return isLogin ? children : <Navigate to="/login" />;
}

然后在路由中使用：

jsx 复制代码

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

虽然 react-router-dom 没有内置"中间件"机制，但借助 JSX 的组合能力，我们完全可以实现类似 Vue Router 的 beforeEach 效果。

更进一步的做法：将 isLogin 提升为全局状态（Context 或 Zustand），避免频繁读取 localStorage。

九、深入细节：一些容易忽略的问题

1. `lazy` 函数必须返回 Promise

js 复制代码

lazy(() => import('./About')) // 正确
lazy(import('./About'))       // ❌ 错误！立即执行

import() 是异步操作，返回 Promise。lazy 需要这个 Promise 来挂起组件渲染。

2. `useEffect` 中的路由跳转

如果你需要在条件满足后自动跳转（如登录成功），可以结合 useNavigate：

js 复制代码

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

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 登录逻辑...
    localStorage.setItem('isLogin', 'true');
    navigate('/pay'); // 编程式导航
  };

  return <button onClick={handleLogin}>登录</button>;
}

3. 访问历史是如何管理的？

浏览器使用栈结构管理访问历史：

navigate('/a') → 栈顶添加 /a
navigate('/b') → 添加 /b
用户点击"返回" → 弹出 /b，回到 /a

而 navigate('/c', { replace: true }) 则是替换当前项，不会新增记录。

这在重定向、表单提交后跳转等场景非常有用。

十、总结：前端路由不只是"跳转页面"

学完这一整套流程，我们应该意识到：

前端路由不仅仅是 URL 到组件的映射，它是一套完整的应用导航体系。

它涉及：

用户体验：无刷新切换、加载反馈、高亮提示；
工程性能：代码分割、懒加载、资源控制；
权限控制：登录校验、角色限制；
可维护性：集中配置、职责分离、易于扩展；

当你能把路由配置写得像一份清晰的产品路径文档时，你的项目就已经具备了良好的架构基础。

结语

react-router-dom 是 React 生态中最成熟、最稳定的官方库之一。它没有炫酷的概念，但却支撑着绝大多数 React 应用的骨架。

希望这篇文章能帮你真正理解它的设计逻辑，而不仅仅是学会怎么写几个 <Route>。

不要怕改路径、不要怕拆结构。只要遵循"关注点分离"的原则，把路由配置独立出来，把懒加载加上，把高亮做好，把守卫写清楚，你的项目就会越来越健壮。

如果你觉得有收获，欢迎点赞、收藏、转发。也欢迎在评论区分享你在项目中遇到的路由难题，我们一起探讨解决。

共勉。

示例项目结构参考：

css 复制代码

src/
├── App.jsx
├── components/
│   ├── Navigation.jsx
│   ├── ProtectRouter.jsx
│   └── LoadingFallback.jsx
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   ├── UserProfile.jsx
│   ├── Product/
│   │   ├── index.jsx
│   │   └── ProductDetail.jsx
│   ├── Login.jsx
│   ├── Pay.jsx
│   └── NotFound.jsx
└── router/
    └── index.jsx

你可以基于此继续拓展：增加搜索过滤、面包屑导航、路由级别权限等高级功能。

不再是切图仔，router拯救了前端工程师

一、单页应用中的路由：我们为什么需要它？

二、前端路由的本质：URL 变化 ≠ 页面刷新

三、两种路由模式的选择：Browser 与 Hash

1. Browser 路由（推荐）

2. Hash 路由（兼容性优先）

四、基础结构搭建：App 与路由分离

五、路由配置详解：从普通路由到嵌套路由

1. 普通路由：最简单的匹配

2. 动态路由：传递参数

3. 嵌套路由：父子结构的自然表达

4. 通配路由：兜底处理 404

5. 重定向：旧路径迁移或默认跳转

六、性能优化：懒加载 + 加载提示

使用 lazy 和 Suspense 实现代码分割

七、导航高亮：让用户知道"我在哪"

八、路由守卫：登录鉴权的实现

九、深入细节：一些容易忽略的问题

1. lazy 函数必须返回 Promise

2. useEffect 中的路由跳转

3. 访问历史是如何管理的？

十、总结：前端路由不只是"跳转页面"

结语

使用 `lazy` 和 `Suspense` 实现代码分割

1. `lazy` 函数必须返回 Promise

2. `useEffect` 中的路由跳转