react路由|react-router-dom（react-router5）

1.路由

一个路由其实就是一个映射关系。（k:v）
key为路径，v为function或component。

1.前端路由

浏览器端路由，value是Component，用于展示页面内容

注册路由：< Route path=“/test” component={Test}>

工作过程：当浏览器的path变为/test的时候，当前路由组件就会变成Test组件

2.后端路由

value是function，用来处理客户端提交的请求

注册路由：router.get(path,function(req,res))

工作过程：当node接收一个请求的时候，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应的数据

2.前端路由的原理

有两种，一种是基于history的。另一种是基于hash的。
createBrowserHistory（）
createHashHistory（）

前端路由的主要依靠的时 history ，也就是浏览器的历史记录

history 是 BOM 对象下的一个属性，在 H5 中新增了一些操作 history 的 API

浏览器的历史记录就类似于一个栈的数据结构，前进就相当于入栈，后退就相当于出栈

并且历史记录上可以采用 listen 来监听请求路由的改变，从而判断是否改变路径

在 H5 中新增了 createBrowserHistory 的 API ，用于创建一个 history 栈，允许我们手动操作浏览器的历史记录

新增 API：pushState ，replaceState，原理类似于 Hash 实现。 用 H5 实现，单页路由的 URL 不会多出一个 # 号，这样会更加的美观

3.react路由的种类

1. web
2. native
3. any

web的就是react-router-dom

4.react-router-dom的使用

1.下载

npm i react-router-dom@5

2.使用

1.import { Link, BrowserRouter, Route } from ‘react-router-dom’

2.把a标签改为Link标签

About

3.同时需要使用Routes标签，来进行组件的显示。

4.外层需要包裹
因此我们也可以在 Link 和 Route 标签的外层标签采用 BrowserRouter(或者HashRouter) 包裹，但是这样当我们的路由过多时，我们要不停的更改标签包裹的位置，因此我们可以这么做

我们回到 App.jsx 目录下的 index.js 文件，将整个 App 组件标签采用 BrowserRouter 标签去包裹，这样整个 App 组件都在一个路由器的管理下

<BrowserRouter>
< App />
</BrowserRouter>

5.路由组件和一般组件。

1.写法不同。
路由组件使用Link来书写，routes来显示
一般组件**：<Demo/>，路由组件：<Route path="/demo" component={Demo}/>

2.存放位置不同
一般组件存在components文件夹中，路由组件存在pages文件夹中。
而最重要的一点就是它们接收到的 props 不同，在一般组件中，如果我们不进行传递，就不会收到值。而对于路由组件而言，它会接收到 3 个固定属性 history 、location 以及 match

6.NavLink（升级版的Link）

NavLink和Link标签作用是相同的。
NavLink的作用是，点击自动添加active高亮类。

可以使用activeClassName改变高亮的类名。

<NavLink  activeClassName="ss" className="list-group-item"  to="/about">About</NavLink>
<NavLink className="list-group-item"  to="/home">Home</NavLink> 

7.NavLink封装

二次封装减少书写重复的代码，about在this.props中有children字段，代表标签中的值。使用{…this.props}表示自动把传入的值当成属性的方法写入NavLink。

8.switch解决相同路径问题

当没有使用switch包裹时，此时路径为/about,第二个匹配成功后，继续向下匹配。

<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/about" component={About}></Route>

而使用switch包裹后，第一个匹配成功后，不向下继续匹配。

9.解决多级路由，样式丢失问题。

10.模糊匹配和严格匹配

11.Redirect

一上来就匹配/api/about这个路径