React-router二级路由+动态路由+LocalStorage+cookie+路由权限校验
1、二级路由实现原理：就是在一级路由Route组件对应的component内编写NavLink+Route
2、解决点击一级路由二级路由默认显示问题
实现原理：将一一路由重定向到二级路由默认路径
例：点击/activities 默认跳转 /activities/recommonded路径
注：NavLink组件改变的是url、Switch组件内决定显示什么内容
3、在一个组件内点击跳转到另一个组件
原理：在react中只要是(被BorwserRouter组件、HashRouter组件包裹的)Route组件，Route组件path路径对应的页面级组件的props就会默认的被添加history、location、macth对象属性，可以利用history内的path、repalce方法进行跳转
this.props.history.push('/topics')
4、动态路由：文章详情页为例
1）配置路径+组件：
这里的：必须有，id就是拼接在/article/后参数的名字,作为this.props.match.params的属性名
2）页面组件跳转传参
接收参数：
This.match.params内有拼接的url信息
This.location.state内有传递的信息
3）高阶组件：让一个不是页面组件的组件使用路由组件提供的方法
我们都知道只有被Route包裹的组件才可以拥有BrowserRouter、HashRouter提供的history、location、match参数，因此我们可以让Route组件渲染想要实现跳转的组件
高阶组件：一个组件返回一个组件
具体方案：在组件内部进行处理，使得该组件在导出时导出一个经过Route处理的高阶组件
这里Route不写path默认为根路径
withRouter组件：React提供包装非页面级组件的方法，可以直接引入使用
4）路由权限校验：封装高阶组件实现cookie校验
5）错误页面处理
6）离开页面钩子组件
React内置一个叫Prompt组件可以实现离开某个页面组件进行询问
默认接收一个参数location包含了要跳转组件的路径信息
7）改写NavLink为高阶组件：实现自定义NavLink渲染标签
8）Route属性component、render、children区别
Commponet：只有Route的path路径匹配才会渲染
Render：同样只有path路径匹配才会渲染、渲染的是render函数的返回值
Children：不管路径匹配不匹配都会渲染、渲染的是返回值
注：
1)localStorage
设置：localStorage.setItem() 参数为localStorageName、value（value如果为对象需要用JSON.stringify()转换为字符串）
获取：localStorage.getItem() 参数为localSrorageName 返回值为字符串需要用JSON.parse()方法转换成基本类型
2)Cookie
a)设置：document.cookie = “”
document.cookie = `${key}=${value};expires=${date.toUTCString()}`
b)删除：让时间字段等于当前时间之前
c)获取所有cookie：document.cookie获取当前页面的所有cookie的字符串形式,形如‘login=true; name=123’
d)查看某个cookie存在还是不存在：
document.cookie.includes('login=true;'),返回值为boolean
3）required ：h5属性没有输入内容提交表单弹出窗口提示