跳到主要内容

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 Routerreact-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 即可