一. 什么是路由？
路由是根据不同的 URL 地址展示不同的内容或者页面！！！
二. React 路由
React 路由的实现主要是 react-router ，而它又被分为三部分：
react-router是 router 的核心代码react-router-dom是用于浏览器的，基于浏览器封装的！！react-router-native是用于原生应用的
三. React-router 基本使用
下面让我们针对 router 的核心代码，说一下react-router的基本使用：
(1) < BrowserRouter > < HashRouter > < Route >
< BrowserRouter > 和 < HashRouter >
用 < BrowserRouter > 或者 < HashRouter > 包括里面的一个个注册路由！！只在顶级路由中使用！！！
< router > 用于匹配路径
-
path属性: 用于设置匹配到的路径
-
component 属性: 设置匹配到路径后,渲染的组件
-
exact: 精准匹配,只有精准匹配到完全一致的路径,才会渲染对应的组件, 比如: Home 组件的 path 是'/', About 组件的 path 是'/about', 那么在匹配'/'的时候如果不是精准匹配会将 '/' 和'/about'都匹配出来,然后将两个组件都渲染到界面上
可以把路由组件封装成一个总的组件，然后引入到普通组件里！！！
(2) < Switch /> 选择匹配 < Redirect /> 重定向
< Switch />
- 在一个个注册路由套上
< Switch />就说明，会从上到下进行匹配，匹配到就会进结束匹配！！ - 如果不加的话，默认会将匹配到的所有组件都会被渲染出来
< Redirect />
- 语法为
< Redirect from="需要重定向的地址" to="需要跳转到的地址" (exact) >
(3) 嵌套路由
嵌套在组件中的，一般会写在组件中，写法一般跟顶级路由写法是一样的，就是不用套外面的< BrowserRouter > 和 < HashRouter >了。直接 < Switch >包括上就行！！
(4) 路由跳转方式
<1> 声明式导航
声明式导航就是使用 < a /> 或者 封装好的 < Link /> 和 < NavLink />
< Link /> 和 < NavLink />
-
to属性: Link 中最重要的属性,用于设置跳转到的路径
-
activeStyle:活跃(匹配)时的样式;
<NavLink exact to="/" activeStyle={{color: "red", fontSize: "30px"}}>首页</NavLink> -
activeClassName: 活跃时添加的 class, 默认情况下NavLink匹配成功时会动态添加一个名为 active 的 class, 所以我们也可以直接编写样式, 如果担心这个 class 在其他地方也使用了,出现样式的层叠,就可以使用 activeClassName 自己添加样式
-
exact: 精准匹配
<2> 编程式导航
编程式导航是使用原生 JS 的方法 或者 react路由的 history 对象上的方法，进行路由的跳转！！
原生JS：
window.location.href = "#/detail/xxx"
react路由的history：
获取history有两种方法：
-
使用 props 属性，因为前面我们有注册路由，即< Route path="/film" component = {Film}> ，所以说我们认为 Film 组件就是 Route 组件的孩子，那么就会接收到父亲组件传过来的好东西！！！
- props属性身上就有 history 对象哦
- 使用
react-router-dom封装的 hooks 里的useHistory()，会返回一个 history 对象！！
