路由 知识

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为精确匹配