前言
当我刚刚开始接触react的时候，路由的跳转到底该使用react-router还是使用react-router-dom,这个是让我们很懵逼的，下面就先来说说react-router和react-router-dom的关系以及区别
(一)api的区别
- react-router提供了router的核心api，如Router、Route、Switch等等，但是并没有提供相关dom操作的api
- react-router-dom提供了通过dom触发的时间路由，例如BrowserRouter、Route、Link等
(二)功能的差异性
- react-router-dom是基于react-router实现的，并且加入了一些浏览器运行的一些功能，
例如：Link组件会渲染一个a标签，BrowserRouter使用 HTML5 提供的 history API可以保证你的 UI 界面和 URL 保持同步，HashRouter使用 URL 的 hash 部分保证你的 UI 界面和 URL 保持同步
所以综上所说因素，一般我们只要引入react-router-dom即可,react-router-dom会自动引入依赖库react-router,在react-router@v4.0版本以后，React Router被拆分成三个包：react-router,react-router-dom和react-router-native，目前网站搭建只需要引入react-router-dom即可，更多用法可以查看官网1
2
3yarn add react-router-dom
//或则
npm install react-router-dom
react-router-dom
（一) BrowserRouter与HashRouter
HashRouter与BrowserRouter这两个路由是基本，我们需要将他们包裹在最外层，当然他们的内层也只能包裹一个元素，例如这样1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17import {BrowserRouter as Router, HashRouter, Route} from "react-router-dom";
<HashRouter>
<div>
<Route exact path='/' component={Login}></Route>
<Route path='/home' component={Home}></Route>
</div>
</HashRouter>
//或则使用BrowserRouter这样
<Router>
<div>
<Route exact path='/' component={Login}></Route>
<Route path='/home' component={Home}></Route>
</div>
</Router>
在这里我们要说说HashRouter和BrowserRouter的区别
- BrowserRouter使用HTML5历史记录API（pushState，replaceState和popstate事件）来保持您的UI与URL同步
- HashRouter使用URL的哈希部分（即window.location.hash）来保持您的UI与URL同步，使得路径上会出现 # 键
(二) Route
Route 就像原材料，控制着我们应该对应显示的内容，也是最重要的路由组件
Route常用的属性，path、exact、component
- path：对应的路径
- exact：仅当路径与location.pathname完全匹配时才匹配，当匹配到路劲后就不会再往下匹配
- component：对应要显示的组件
app.js 1
2
3
4
5
6
7
8import {BrowserRouter as Router, HashRouter, Route} from "react-router-dom";
<HashRouter>
<div>
/*一般这里都要加个exact，不然切换路径后，两个路径对应的组件都会被显示出来*/
<Route exact path='/' component={Login}></Route>
<Route path='/home' component={Home}></Route>
</div>
</HashRouter>
(三) Link与NavLink
Link与NavLink都是控制路由跳转的，当然NavLink所具有的功能比Link更多，所以，使用的时候视情况而定。控制路由跳转这只是其中的一种方法，我们也可以使用react-router里面的js方法实现跳转1
2