DEV Community
·
React Router和React Router DOM有什么区别？
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
react-router和react-router-dom是用于React应用的路由库。react-router是核心库，提供基本路由功能；react-router-dom专为Web应用设计，扩展了react-router的功能，包含BrowserRouter和Link等组件。构建Web应用时，使用react-router-dom即可。
🎯
关键要点
- react-router和react-router-dom是用于React应用的路由库。
- react-router是核心库，提供基本路由功能，如匹配URL和管理导航。
- react-router是框架无关的，可以用于Web、React Native等环境。
- react-router通常作为其他路由库的依赖，如react-router-dom和react-router-native。
- react-router-dom是专为Web应用设计的官方路由库，基于react-router构建。
- react-router-dom提供了额外的Web相关组件，如BrowserRouter、Link和NavLink等。
- react-router-dom用于构建具有客户端路由的Web应用，是React Web应用的常用选择。
- react-router和react-router-dom的主要区别在于目的、支持的环境、组件和钩子等。
- 要在项目中使用react-router-dom，可以通过npm或yarn安装。
- react-router-dom自动包含react-router作为依赖。
- 如果构建React Web应用，使用react-router-dom；如果创建库或React Native应用，使用react-router。
- React Router v6+是标准，专注于基于组件的路由，useHistory已被useNavigate替代。
- 在Web项目中，react-router很少直接使用，主要使用react-router-dom。
❓
延伸问答
react-router和react-router-dom的主要区别是什么？
react-router是核心路由库，适用于多种环境；而react-router-dom是专为Web应用设计，提供Web特定组件和功能。
如何在项目中安装react-router-dom？
可以通过npm或yarn安装，使用命令：npm install react-router-dom或yarn add react-router-dom。
react-router-dom提供了哪些Web特定的组件？
react-router-dom提供了BrowserRouter、Link、NavLink等Web特定组件。
在构建React Web应用时，应该使用哪个库？
在构建React Web应用时，应该使用react-router-dom。
react-router的主要功能是什么？
react-router提供基本的路由功能，如匹配URL和管理导航，但不包含Web特定功能。
react-router-dom中的useNavigate钩子有什么用？
useNavigate钩子用于实现程序化导航，例如在用户登录后重定向到其他页面。
🏷️
标签
➡️
