react-router-dom基本使用

react-router-dom现在发了6.0版本，目前不稳定,这里我们使用5.X

基础步骤

第一步

安装包

npm i react-router-dom@5.3.0

第二步 
导入包，并使用。

import { HashRouter, Route, Link } from 'react-router-dom' 

第三步
使用Link指定导航链接

使用Route指定路由规则(哪个路径展示哪个组件)

路由三大对象之-Router

Router 组件：包裹整个应用，一个 React 应用只需要使用一次  

俩种常用Router:  HashRouter和 BrowserRouter(推荐)

HashRouter:
使用 URL 的哈希值实现

原理：监听 window 的 hashchange 事件来实现的

BrowserRouter:
使用 H5 的 history.pushState() API 实现

原理：监听 window 的 popstate 事件来实现的

路由三大对象之-Link 
Link:指定导航链接 常用有Link与NavLink

Link:
Link组件最终会渲染成a标签，用于指定路由导航

to属性，将来会渲染成a标签的href属性

Link组件无法展示哪个link处于选中的效果

NavLink:
NavLink组件，一个更特殊的Link组件，可以用用于指定当前导航高亮,选中项默认自带ac