npm i react-router-dom@5
为有效使用单页面管理原来的多页面的功能,前端路由应运而生.
从一个视图跳转到另一个视图,是URL路径与组件的对应关系.
1. 安装路由 npm i react-router-dom
2. 导入 import { BrowserRouter as Router,Route,Link } from 'react-router-dom';
3. 使用Router包裹整个组件
4. 使用Link(解析为a标签)组件作为导航菜单路由入口
5. 使用Route配置路由的规则和要展示的组件路由出口
## 路由执行过程
1. 点击Link组件(a标签),修改了浏览器地址栏中url
2. React路由监听到地址栏url的变化
3. React路由内部遍历所有Route组件,使用路由规则(path)与pathname进行匹配
4. 当路由规则(path)能够匹配地址栏中的pathname时,就展示改route组件内容
## 编程式导航
通过js代码来实现页面跳转 this.pops.history.push('/home')
history是react路由提供的,用于获取浏览器历史记录的相关信息
push(path):跳转到某个页面,参数path表示要跳转的路径
go(n)前进或者后退到某个页面(后退用-)

<Redirect to="/home"></Redirect>
<Navigate to="/about"></Navigate>
## 默认路由
```
            <Route path ="/" element={<LoginApp/>} ></Route>
```
默认情况下React是模糊匹配模式
精确匹配添加exact
```html
            <Route exact  path ="/home" element={<HomeApp/>} ></Route>
```

React路由一切都是组件,可以像思考组件一样思考路由.

HashRouter  路径中包含#,#后所有资源都不发送服务器.

路由组件(<Header/>):放到pages文件夹下,传入大量props信息
一般组件(<Route path="/about" component={About} />):放到components,默认不传props内容,无history

NavLink 默认点击高亮(activeClassName)