1：路由分为前端路由和后端路由
后端路由用来处理用户提交的请求，当node接受到一个请求的时候，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，然后然后响应数据
前端路由：用来展示页面内容
2：简单准备工作
下载react-router-dom：npm i --save react--router-dom
引入bootstrap.css 样式
确认导航区和显示区，导航区的a 需要写为Link标签 展示区写Router标签进行路由匹配，App标签外面需要包裹 BrowserRouter 或者HashRouter 标签
3：路由切换显示过程：
（1）在index.js中 引入 BrowserRouter路由，把app进行包裹
（2）在components创建两个组件 然后再这里面分别 从react中引入Component 然后export导出 div 需要显示内容
（3）然后再app中引入这两个组件 ，并且再react-router-dom中引入Link{形成标签}，和Router{呈现组件}
（4）然后在render中return出去Link 用来匹配地址 br下面 用来进行路由匹配显示组件Router
这样就可以点击然后有不同的页面了。
4：NavLink 和Link区别：
用NavLink点击的时候会自动带class：active这个类，也可以在NavLink标签进行修改用activeClassName=“自定义类”
5：对NavLink 进行封装，
在component中创建MyNavLink 然后再这其中从react引入Component 从react-router-dom中引入Navlink。
然后在export导出MyNavLink render里面return出去NavLink标签。
这时在app.js里面br上面就可以不用写NavLink标签，直接在上方import封装的 ，然后写上等装好的名做标签就可以了 。
6：NavLink 传值
log输出发现NavLink标签中有props 值有to 和childer
所以我可以在NavLink标签中 把{...this.props}扔进去 这样就使得NavLink标签有了to 和childer属性
childer携带得数据就是使用标签使写得文字
to就是标签使用得地址
7：Switch得使用
一般path和component是一种对应关系，当用了switch之后就匹配路径就可以了，不用在往下写了
一般解决问题：就是当我创建了两个组件得时候，我用了path给他们俩匹配一样得路径，但是组件匹配不一样，当我点击这个路径得时候就会出现两个组件显示内容。（没用）
（1）在react-router-dom中引入switch
然后把br下面显示得router展示 用switch标签包裹 这样当我点击时就不会出现两个组件得内容。而是进行对应显示。
8：标签加上exact为精确匹配
9：嵌套路由实现：点击路由之后有子路由在接着点击就会出现子路由内容。
在home组件下面再创建一个新组件
新组件写MyNavLink标签，然后写Route展示组件 然
然后再在home组件中引入两个子组件用封装MyNavLink指明路径 在用Router指明组件 这就是路由嵌套得全过程。
10：路由组件得三种传参方式：
(1)：通过params传参
在路由原有链接（Link）上携带我想要传递得参数，然后再Router身上通过/：name/：age进行顺序接收 接受到的参数为this.props.match.params 就能在子路由上获取到
但是state里面有多个参数：Link上我想要传递state里面得数组参数，不可以直接写了，所以在 return中把数组进行解构然后用数组.map来把Link标签进行包裹，用反引号在里面${item.id} ${item.tittle}就可以获取到state里面的数值然后就去到相应得子组件然后子组件进行相应得显示。
特点：在地址上有相应得参数 解构不是很清晰，在浏览器地址上能看到相应参数
（2）通过？进行传参
正常链接后面接 ？id={title.id}&title={item.title} 这种形式进行传参
Route接收得时候就不用留位置了，正常显示就可以了，因为上面已经指明了
通过 this.props.location.search 获取到值
特点：不用在router中写参数，也能在浏览器地址中看到参数
（3)通过state进行传参 （优一点）
路由链接携带参数 写到to里面然后state：{name：‘tom“，age：”18“}
Route正常注册就可以
通过this.props.localation.state获取值
特点：不用在router中写参数，但是在浏览器地址中看不到参数
11：路由得push和replace模式
push：属于压栈模式，每次点击一个路由栈内存就会新增一个再最上方（默认是push模式）
replace：将当前路由进行提换，点击后退按钮不会回到上一个路由里面了。（在标签上加上replace属性就可以）回退到浏览器页面。不会记录路由状态。