📌React 路由超详解（2025 版）：从 0 到 1 再到 100，一篇彻底吃透

本文基于 React Router 6.23 ，覆盖 基础 → 进阶 → 性能 → 微前端，附代码，复制即用。

📌 目录

路由基础：4 种 Router 与 4 个核心 API
参数与状态：useParams、useSearchParams、useLocation
路由守卫与重定向：高阶组件、Outlet、Navigate
懒加载 & Suspense：首屏优化实战
路由性能：嵌套、缓存、防抖
微前端路由：qiankun / single-spa 配置

1️⃣ 路由基础：4 种 Router 与 4 个核心 API

Router	场景	示例
`BrowserRouter`	大多数项目	`https://app.com/user/1`
`HashRouter`	老服务器无配置	`https://app.com/#/user/1`
`MemoryRouter`	单元测试	内存路由
`StaticRouter`	SSR	Node 端渲染

最小可运行示例（Vite + React Router 6）

tsx 复制代码

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

tsx 复制代码

// App.tsx
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import User from './pages/User';

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/user/:id" element={<User />} />
    </Routes>
  );
}

2️⃣ 参数与状态：3 个 Hook 全覆盖

Hook	作用	示例
`useParams`	路由参数	`const { id } = useParams()`
`useSearchParams`	查询字符串	`const [search, setSearch] = useSearchParams()`
`useLocation`	完整 URL 状态	`const { pathname, search } = useLocation()`

动态路由 + 查询参数

tsx 复制代码

// /user/123?tab=profile
function User() {
  const { id } = useParams();            // 123
  const [search] = useSearchParams();    // tab=profile
  const tab = search.get('tab') || 'info';
  return <div>用户 {id} - {tab}</div>;
}

3️⃣ 路由守卫与重定向

① 高阶组件守卫

tsx 复制代码

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

function RequireAuth() {
  const isLogin = useAuth();
  return isLogin ? <Outlet /> : <Navigate to="/login" replace />;
}

<Route element={<RequireAuth />}>
  <Route path="/dashboard" element={<Dashboard />} />
</Route>

② 404 重定向

tsx 复制代码

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

4️⃣ 懒加载 & Suspense：首屏瘦身

tsx 复制代码

import { lazy, Suspense } from 'react';

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

<Route
  path="/lazy"
  element={
    <Suspense fallback={<Skeleton />}>
      <LazyPage />
    </Suspense>
  }
/>

配合 SplitChunks ，首屏 JS 体积 -70%。

5️⃣ 性能优化 3 连击

问题	解决	代码
深层嵌套重渲染	`React.memo` + `Outlet`	`const MemoRoute = React.memo(Route)`
相同路由重复渲染	`key` 参数	`<Route key={location.key} ... />`
滚动位置丢失	`useLocation` + `useEffect`	见下方示例

tsx 复制代码

// 保存滚动位置
const location = useLocation();
useEffect(() => {
  window.scrollTo(0, 0);
}, [location.pathname]);

6️⃣ 微前端路由（qiankun）

主应用路由映射

tsx 复制代码

// 主应用
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'sub-vue',
    entry: '//localhost:3001',
    container: '#sub-vue',
    activeRule: '/sub-vue',
  },
]);
start();

子应用路由（独立）

tsx 复制代码

// 子应用
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory('/sub-vue'),
  routes: [...],
});

7️⃣ 速记 30 秒模板

"React Router 6 用 Routes/Route 声明式路由，useNavigate 跳转；权限用高阶组件或 RequireAuth；懒加载用 Suspense；微前端用 qiankun 路由隔离；性能用 React.memo + Outlet。"

附：脑图速记

yaml 复制代码

React Router 6
├─ Router: Browser/Hash/Memory/Static
├─ Route: path + element
├─ Hook: useParams / useSearchParams / useNavigate
├─ Guard: RequireAuth / Navigate
├─ Lazy: Suspense + defineAsyncComponent
└─ 性能: React.memo / key / scroll restore