React 路由方案深度对比：标准、核心与轻量级选择

在 React 生态中，路由管理是构建单页应用（SPA）的核心环节。react-router-dom 长期占据主导地位，但 wouter 提供了轻量级替代方案，而 @reach/router 已成为历史。作为架构师，我们需要清楚每个包的定位、API 风格以及维护状态，以便为团队选择最合适的工具。

⚠️ 维护状态与生命周期

选择库的第一步是确认它是否活着。维护状态直接影响项目的长期安全性。

@reach/router 已正式废弃。

• 官方已停止维护，功能合并至 React Router v6。
• 新项目中严禁使用，旧项目应尽快迁移。

// @reach/router:  legacy API (已废弃)
import { Router, Route } from "@reach/router";

function App() {
  return (
    <Router>
      <Home path="/" />
      <User path="/user/:id" />
    </Router>
  );
}

react-router 是核心库。

• 它提供通用逻辑，但缺少 DOM 特定组件（如 Link）。
• 通常作为依赖被自动安装，不建议单独用于 Web 项目。

// react-router: 核心逻辑 (通常不直接使用)
import { Router } from "react-router";
import { createBrowserHistory } from "history";

// 需要手动创建 history 对象，适合非 DOM 环境
const history = createBrowserHistory();

react-router-dom 是 Web 标准实现。

• 基于 react-router 构建，增加了浏览器特定功能。
• 持续更新，支持最新 React 特性。

// react-router-dom: 标准 Web 实现
import { BrowserRouter, Routes, Route } from "react-router-dom";

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

wouter 是轻量级活跃项目。

• 持续维护，专注于最小化实现。
• 无外部依赖，更新频率稳定。

// wouter: 轻量级实现
import { Router, Route } from "wouter";

function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/user/:id" component={User} />
    </Router>
  );
}

🎯 API 设计风格：组件 vs Hooks

路由库的 API 设计决定了代码的编写方式。现代 React 开发更倾向于 Hooks，但组件式声明依然流行。

react-router-dom 支持组件与 Hooks 混合。

• v6 版本推荐使用 <Routes> 组件配合 useNavigate 等 Hooks。
• 类型支持完善，适合大型团队协作。

// react-router-dom: Hooks 导航
import { useNavigate } from "react-router-dom";

function LoginButton() {
  const navigate = useNavigate();
  return <button onClick={() => navigate("/dashboard")}>登录</button>;
}

wouter 纯粹基于 Hooks。

• 核心 API 是 useRoute 和 useLocation。
• 代码更简洁，没有复杂的嵌套组件结构。

// wouter: 纯 Hooks 匹配
import { useRoute } from "wouter";

function UserPage() {
  const [matches, params] = useRoute("/user/:id");
  return matches ? <div>ID: {params.id}</div> : null;
}

@reach/router 仅支持组件式。

• 旧式 API，依赖 props 传递导航能力。
• 不支持现代 Hooks 模式，难以与现代 React 代码集成。

// @reach/router: 旧式 Props 导航
import { Link } from "@reach/router";

// 只能使用 <Link> 组件，缺乏编程式导航的灵活性
<Link to="/dashboard">前往仪表板</Link>

react-router (核心) 提供底层 Hooks。

• 提供 useRouter 等底层能力。
• 适合封装自定义路由逻辑，而非直接业务开发。

// react-router: 底层 Hook
import { useRouter } from "react-router";

// 用于获取内部 router 对象，普通业务很少用到
const { navigator } = useRouter();

📥 数据加载与路由集成

现代路由库不仅仅是跳转，还涉及数据获取。这是区分重型与轻型方案的关键点。

react-router-dom 支持数据路由（v6.4+）。

• 提供 loader 和 action 机制，类似 Remix。
• 可以在渲染前获取数据，避免水合不匹配。

// react-router-dom: 数据加载
import { useLoaderData } from "react-router-dom";

export async function loader() {
  return fetch("/api/user");
}

function UserPage() {
  const user = useLoaderData();
  return <div>{user.name}</div>;
}

wouter 不包含数据加载逻辑。

• 保持纯粹的路由匹配，数据获取由开发者自行决定。
• 适合配合 React Query 或 SWR 使用。

// wouter: 手动数据加载
import { useRoute } from "wouter";
import useSWR from "swr";

function UserPage() {
  const [matches, params] = useRoute("/user/:id");
  const { data } = useSWR(matches ? `/api/user/${params.id}` : null);
  return data ? <div>{data.name}</div> : null;
}

@reach/router 无内置数据加载。

• 需要完全手动管理生命周期。
• 在复杂场景下容易导致代码碎片化。

// @reach/router: 手动 useEffect 加载
import { useEffect, useState } from "react";

function UserPage({ id }) {
  const [user, setUser] = useState(null);
  useEffect(() => { fetch(`/api/user/${id}`).then(setUser); }, [id]);
  return user ? <div>{user.name}</div> : null;
}

react-router (核心) 无 DOM 数据加载。

• 仅提供路由状态，不涉及 HTTP 请求。
• 需要上层封装才能实现数据流管理。

// react-router: 无内置 fetch
// 开发者需自行结合上下文或外部库实现

🧩 嵌套路由与布局管理

复杂应用通常需要嵌套布局（例如侧边栏 + 内容区）。不同库的处理方式差异巨大。

react-router-dom 使用 <Outlet> 组件。

• 明确声明子路由渲染位置。
• 支持多层嵌套，结构清晰。

// react-router-dom: 嵌套布局
import { Outlet } from "react-router-dom";

function DashboardLayout() {
  return (
    <div>
      <Sidebar />
      <Outlet /> {/* 子路由渲染在这里 */}
    </div>
  );
}

wouter 通过组件组合实现。

• 没有专门的 <Outlet>，依靠子组件渲染逻辑。
• 更灵活，但需要手动管理匹配状态。

// wouter: 手动组合布局
function DashboardLayout({ children }) {
  return (
    <div>
      <Sidebar />
      {children}
    </div>
  );
}

// 使用时需手动匹配子路由

@reach/router 使用 props.children。

• 隐式传递，不够直观。
• 深层嵌套时难以追踪渲染来源。

// @reach/router: 隐式 children
function Dashboard({ children }) {
  return <div>{children}</div>;
}

react-router (核心) 提供 <Outlet> 逻辑。

• 底层实现嵌套渲染机制。
• react-router-dom 复用了此能力。

// react-router: 底层 Outlet
// 内部实现逻辑，通常通过 react-router-dom 暴露

📊 核心特性对比表

💡 最终建议

react-router-dom 是大多数团队的标准选择 🏆。 它提供了最完整的功能集，包括数据加载、嵌套路由和完善的类型定义。虽然体积稍大，但对于商业项目来说，稳定性和生态支持更重要。如果你正在构建一个需要长期维护的后台系统或复杂 SPA，不要犹豫，选它。

wouter 是特定场景下的利器 🔪。 当你需要极致轻量，或者在微前端架构中集成一个小型子应用时，它的简单性就是优势。没有复杂的配置，引入即可用。但要注意，复杂的数据流需要你自己设计。

@reach/router 和 react-router (单独) 应避免 🚫。 前者已死，后者太底层。除非你是库作者，否则不要在生产环境中直接依赖 react-router 核心包，也不要在新项目中触碰 @reach/router。

总结：路由选型本质是在“功能完整性”与“轻量级”之间做权衡。对于 90% 的 Web 项目，react-router-dom 是最稳妥的决定；对于剩余 10% 的极端场景，wouter 提供了优雅的退路。