第二大脑

主题

2026-08-24
540
2.1m

概念卡片：React Router 路由机制 ​

一句话机制：React Router 是 SPA 的前端路由——URL 变化时不重新加载页面，而是用 Routes/Route 匹配路由表、渲染对应组件；声明式导航用 <Link>/<NavLink>，编程式导航用 useNavigate()，读参数用 useParams()/useSearchParams()。

前端路由的由来（三个阶段） ​

  1. 后端路由：服务器渲染整个 HTML 返回（利于 SEO，但前后端耦合、页面重载）。
  2. 前后端分离：后端只出数据，前端渲染。
  3. SPA（单页应用）：URL 变化不整页刷新，前端路由接管视图切换。

关键代码示例 ​

jsx
import { BrowserRouter, Routes, Route, Link, useNavigate, useParams } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Link to="/user/1">用户1</Link>            {/* 声明式导航 */}
      <Routes>
        <Route path="/user/:id" element={<User />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  )
}

function User() {
  const { id } = useParams()                     // 读路径参数 /user/1 → id=1
  const navigate = useNavigate()                 // 编程式跳转
  return <button onClick={() => navigate('/login')}>去登录</button>
}

核心 API 速查 ​

API用途
<Routes> / <Route path element>声明路由表
<Link> / <NavLink>声明式导航（NavLink 高亮当前）
useNavigate()编程式跳转
useParams() / useSearchParams()读路径参数 / 查询参数
<Outlet>嵌套路由的子路由出口

不变量（必须成立的约束） ​

  • SPA 路由切换不重新加载整页，只是换组件（区别于后端路由）。
  • 顶层必须用 <BrowserRouter> 包裹（history 模式），且服务器要配 history fallback，否则刷新 404。
  • 嵌套路由靠 <Outlet> 渲染子路由。
  • React Router 没有内置全局守卫（不像 Vue Router 的 beforeEach），权限控制要靠组件内判断 + <Navigate> 重定向自己封装。

踩坑案例 ​

  • 现象：history 模式下直接访问 /user/1 刷新，页面 404。 原因：服务器没有 fallback 到 index.html。解决：Nginx try_files $uri /index.html，或改用 hash 模式。

常见误解 ​

  • 以为 React Router 和 Vue Router 一样有 beforeEach 全局守卫 → 需自己封装。
  • 用 history 模式却忘了服务器配置 → 子路由刷新 404。

关联 ​

最近更新