React Router vs React Router DOM: 架构、API 与适用场景深度对比

react-router 和 react-router-dom 是 React 生态中最核心的路由解决方案，但它们服务于不同的层级。react-router 提供平台无关的核心路由逻辑，而 react-router-dom 则是在此基础上为 Web 浏览器环境封装的具体实现。理解两者的界限对于构建可维护、跨平台的应用架构至关重要。

🏗️ 路由入口提供者：浏览器历史 vs 内存历史

react-router-dom 提供了专为浏览器设计的路由提供者。

• 使用 BrowserRouter 利用 HTML5 History API。
• 使用 HashRouter 利用 URL 哈希值。
• 适合标准的 Web 单页应用。

// react-router-dom: 浏览器环境
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>...</Routes>
    </BrowserRouter>
  );
}

react-router 提供通用的路由提供者，不依赖浏览器 API。

• 使用 MemoryRouter 将历史记录的堆栈保存在内存中。
• 适合 React Native、服务端渲染（SSR）或测试环境。
• 不修改浏览器地址栏。

// react-router: 通用/非浏览器环境
import { MemoryRouter } from 'react-router';

function App() {
  return (
    <MemoryRouter initialEntries={['/home']}>
      <Routes>...</Routes>
    </MemoryRouter>
  );
}

🖱️ 导航交互组件：声明式链接 vs 命令式导航

react-router-dom 提供了声明式的导航组件。

• <Link> 渲染为 <a> 标签，支持右键打开新标签。
• <NavLink> 支持激活状态的样式处理。
• 符合 Web 语义化标准。

// react-router-dom: 声明式导航
import { Link } from 'react-router-dom';

function Nav() {
  return <Link to="/about">关于我们</Link>;
}

react-router 不包含 DOM 组件，依赖钩子进行命令式导航。

• 没有内置的 <Link> 组件。
• 使用 useNavigate 钩子触发跳转。
• 适合自定义导航控件或非 DOM 环境。

// react-router: 命令式导航
import { useNavigate } from 'react-router';

function Nav() {
  const navigate = useNavigate();
  return <button onClick={() => navigate('/about')}>关于我们</button>;
}

📍 URL 数据访问：查询参数 vs 位置状态

react-router-dom 支持读取浏览器特有的查询参数。

• 提供 useSearchParams 钩子。
• 可以直接读写 URL ?key=value 部分。
• 自动处理编码和解码。

// react-router-dom: 查询参数
import { useSearchParams } from 'react-router-dom';

function Search() {
  const [params, setParams] = useSearchParams();
  const q = params.get('query');
  return <div>{q}</div>;
}

react-router 提供通用的位置信息访问。

• 提供 useLocation 钩子。
• 返回 pathname, search, hash, state。
• 需要手动解析 search 字符串。

// react-router: 位置状态
import { useLocation } from 'react-router';

function Search() {
  const location = useLocation();
  // 需要手动解析 location.search
  return <div>{location.pathname}</div>;
}

🤝 相似之处：核心路由逻辑共享

尽管存在环境差异，两者在核心路由定义上完全一致。

1. ⚛️ 路由配置结构相同

• 都使用 <Routes> 和 <Route> 组件。
• 路由匹配逻辑和嵌套规则完全一致。

// 两者通用：路由定义
import { Routes, Route } from 'react-router'; // 或 react-router-dom

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

2. 🪝 核心钩子通用

• useParams, useNavigate, useOutlet 在两者中均可用。
• react-router-dom 重新导出了 react-router 的所有核心钩子。

// 两者通用：获取参数
import { useParams } from 'react-router'; // 或 react-router-dom

function User() {
  const { id } = useParams();
  return <div>{id}</div>;
}

3. 🛡️ 编程式导航一致

• useNavigate 的行为在两者中保持一致。
• 都支持 replace, state 等选项。

// 两者通用：跳转逻辑
import { useNavigate } from 'react-router'; // 或 react-router-dom

function Submit() {
  const navigate = useNavigate();
  const handleSubmit = () => navigate('/success', { replace: true });
  return <button onClick={handleSubmit}>提交</button>;
}

📊 总结：核心差异对比

💡 架构选型建议

react-router-dom 是 Web 开发的标准选择 🌐。 如果你的目标是构建运行在浏览器中的 React 单页应用，请直接使用 react-router-dom。它提供了所有必要的浏览器集成（如历史管理、链接组件、搜索参数），并且内部已经包含了 react-router 的所有功能。不要为了“纯粹性”而刻意导入 react-router，这会增加不必要的复杂度。

react-router 是跨平台与底层架构的基石 🧱。 如果你正在开发 React Native 应用（配合 react-router-native），或者需要在 Node.js 服务端进行路由匹配，亦或是编写一套需要在 Web 和 Native 之间共享的路由逻辑库，那么你需要直接依赖 react-router。它让你摆脱对 DOM API 的依赖，实现真正的逻辑复用。

最终建议：在 95% 的 Web 项目中，import { ... } from 'react-router-dom' 是最佳实践。仅在构建底层库或非 Web 平台时，才考虑直接使用 react-router。