React Router 和 react-router-dom
react-router-dom 和 React Router 是 React 生态中路由库中两个核心包,他们紧密联系,也有明确的定位差异。
React Router v7 已经将 react-router-dom 、 @remix-run/react 、 @remix-run/server-runtime 、 @remix-run/router 移回 React Router 。
从此,江湖只有活着的 React Router 和传说中的 react-router-dom
下面的内容 仅供阅读了解 react-router-dom
一、核心定位
1. React Router 核心库
React Router 是基础实现库,提供路由的核心逻辑(如路由匹配、导航控制、状态管理等),不依赖具体运行环境(浏览器、 Node.js 、 React Native 等)。
抽象路由的通用功能:
- 路由配置与匹配(
Route、Routes) - 导航控制 (
History对象、useNavigate钩子 )‘ - 参数获取 (
useParams、useLocation) - 基础类型定义 (如
RouteObject、Location)
2. react-router-dom (浏览器环境封装)
针对 浏览器环境 的路由库,基于 React Router 的核心功能(现在只是一个安装链接了),扩展了浏览器特有的 API 和组件。
解决了浏览器场景下的具体问题:
- 浏览器历史记录管理(
BrowserRouter基于historyAPI) - 哈希路由支持 (
HashRouter基于URL#) - 浏览器专用的导航组件(
Link、NavLink) - 与服务端渲染 ( SSR )适配接口
二、 功能差异
| 特性 | React Router | react-router-dom |
|---|---|---|
| 目标环境 | 通用 | 仅限浏览器环境 |
| 核心依赖 | 无额外依赖(纯 JS 实现路由逻辑) | 依赖 React Router (包含其所有功能) |
| 浏览器专属组件 | 无 | 提供 BrowserRouter 、 HashRouter 、 Link 、 NavLink |
| history 对象 | 抽象 History 接口 | 实现浏览器专用的 BrowserRouter 和 HashRouter |
| 服务端渲染 | 提供基础支持 | 扩展了与浏览器环境适配的 SSR 接口(如 StaticRouter ) |
三、 依赖关系
react-router-dom **必须依赖 React Router ** ,安装 react-router-dom 时, npm/yarn/pnpm 会自动将其依赖的 React Router 一同安装。
开发浏览器应用时,只需安装 react-router-dom 即可获得所有的需要的功能(无需单独安装 React Router )
四、 使用场景
1. 浏览器环境 (Web 应用)
直接使用 react-router-dom , 它包含了 React Router 的核心功能,并提供了浏览器专用的组件(如 BrowserRouter 、 Link )
2. 非浏览器环境
在 React Native 中使用 react-router-native ,若在 Node.js 环境中使用,可直接依赖 React Router 即可