react技术全家桶（41）Reat路由

1.SPA的理解
a.单页web应用
b.整个应用只有一个完整的页面
c.点击页面中的连接不会刷新页面，只会做页面的局部更新
d.数据都需要通过ajax请求获取，并在前端异步展现。

路由的原理
点击路由组件，获取到这个路由组件的地址 然后改变浏览器地址 history的listen方法监听到浏览器地址发生了变化 然后在路由配置中找该路径对应的组件是哪一个 然后展示该组件。
所以路由就是一个映射关系 key和value key为路径 value可能是function 或者 component

https://docschina.org 印记中文 有react vue等中文文档

基本使用
导入路由
import {Link} from react-router-dom;

About to后面跟小写  import {Link，Router} from react-router-dom; About  表示需要指定Router是HashRouter还是BorwerRouter

import {Link，BrowserRouter,Router} from react-router-dom;
//编写路由链接

About

//注册路由

path与to相同

整个项目需要一个路由器管理，所以整个项目只需要一个BrowserRouter；
//编写路由链接

About
//注册路由
path与to相同

在实战中 BrowserRouter是包裹App组件。就是在index中把App组件包裹。

路由组件和一般组件
这是路由组件：

如果使用时不传递参数 props会接受到history对象
这是一般组件：

如果使用时不传递参数 props不会接受任何东西

路由组件是放在pages目录中的。
一般组件是放在components目录中

NavLink 替换Link NavLink有选中高亮的效果

标签体是通过标签的children属性传递的：比如

<NavLink {…this.props}/>
MyLink是NavLink的封装 children会通过props传递给子组件