1. 前言
官方文档地址：https://reactrouter.com/web/guides/quick-start
2. 高阶组件
先说一下高阶组件的意思，一个函数 接受一个组件作为参数 返回一个新的组件
功能性的封装 减少重复代码
一般被高阶组件处理过的组件获取数据 都从props获取
3. Router
Router就是路由器，里面包含若干个Route（路由）
常用的Router有两个：
1、<BrowserRouter>
2、<HashRouter>
BrowserRouter即在浏览器地址栏中不显示#，而是以传统的URI显示
而HashRouter就是以#为间隔符，显示URI
前者相比于后者利于SEO
4. Route
Route包含在Router中，但更多情况下，我们直接都是把Router放在“根”上，也即App上：
代码语言：javascript复制import React from "react";
import ReactDom from "react-dom";
import App from "./pages/App";
import {BrowserRouter as Router} from "react-router-dom"
ReactDom.render(
<Router>
<App/>
</Router>
, document.getElementById("root"));这样，在其他组件内，就不用让Router包裹Route了
那么如何使用Route呢？
Route有两个特别重要的属性：path和component
代码语言：javascript复制<Route path="/hello" component={Nav1}/>
<Route path="/world" component={Nav2}/>这样，当匹配到/hello时，就会显示Nav1组件的内容
当然，这样是默认继续匹配的，什么意思呢？当匹配到/hello时，如果还有/hello/hello路径的话，也会继续匹配
解决办法也很简单，使用Swtich组件即可
也即，在Route上再包一层Switch
代码语言：javascript复制<Switch>
<Route path="/hello" component={Nav1}/>
<Route path="/world" component={Nav2}/>
</Switch>官网对于Switch时这样介绍的：
Renders the first child
<Route>or<Redirect>that matches the location.
嵌套路由
在路由里套路由 所有的组件你都可以使用使用 Link Switch ..
嵌套路由的上一级 千万不能加exact匹配
代码语言：javascript复制<Route path='/singer' render={()=>{
<Route xxx={xxx}></Route>
<Route xxx={xxx}></Route>
}}></Route> 5. Link
说完基本的路由后，需要认识“导航链接”
基本理解就是通过导航链接跳转到相应路由，毕竟你不会让用户自行在浏览器地址上输入相应的URI吧？
简单理解，就是一个a标签罢了！
代码语言：javascript复制<Link to="/hello">导航1</NavLink>
<Link to="/world">导航2</NavLink>有一个基本属性，就是to，也即要导航到的路径
NavLink
Link已经足够用了，但是一般导航我们都有一个激活class，但该导航激活后，会有个高亮的效果，那么如何实现呢？
一般情形下，如果使用NavLink的话，会自动添加一个名为active的class，如果要自定义，那么给NavLink添加要给属性即可：activeClassName
<NavLink to="/hello">导航1</NavLink>
<NavLink to="/world">导航2</NavLink>传递隐形参数
代码语言：javascript复制<Link
to={{
pathname: "/courses",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}
/>其中state就是你要隐形传递的数据，这里的数据时不会显示在地址栏或者哪里的
replace
代码语言：javascript复制<Link
replace={true}
to={{
pathname: "/courses",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}
/>代表不留下历史记录
6. Param
路由传参
在路径上加上:参数名即可，如果可空，那么使用:参数名?
如：
代码语言：javascript复制<NavLink to="/hello/:id?">导航1</NavLink>
<NavLink to="/world/:id">导航2</NavLink>7. NotFound
如果未找到页面，返回404，如何做？
在所有Route后面再加上一个Route，返回一个404组件即可，但是，注意：
需要使用Switch来包裹，或者每个Route都是用exact属性，来使精准匹配URL
