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）配置路径+组件：

<Route path='/article/:id'component={Article}></Route>

这里的：必须有，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属性没有输入内容提交表单弹出窗口提示