4 React-Router基础、二级/动态路由、高阶组件、路由权限控制

1、React-Router-dom;

(1).npm install react-router-dom; -> 引入

(2).分类：HahRouter、BrowserRouter；                                                                                [1].HahRouter -> localhost:3000/#/topics ->其会在路径后添加#,容易与hash#混乱；                      [2].取别名[方便后续修改]：BrowserRouter as Router

(3).;

[1].若只有一个,默认path="/"; -> 其也可以省略

[2].若有多个，最后一个不写path,表示除了上面所示的路由，其它路由都会跳转到该组件；

(4).;//匹配到便不会再向下匹配，常配合exact属性一起使用 => 匹配一模一样的，exact={true};也OK；

(5).;//重定向：若是以上都匹配不到，自动跳转到首页/或其它页

(6).路由跳转; ;// 最终都转换为标签，但不能取别名，Vue中使用tag属性可以取别名；优势：其跳转页面，系统会自动加类名.active,巧妙利用更改样式；=>两者大多结合exact属性使用；

2、二级路由：

3、动态路由：

跳转 -> this.props -> 路由的相关值

4、高阶组件withRouter(); -> withRouter(组件);包裹组件即可 -> 目的：使用其可让组件内所有元素拥有this.props.history/location/match等属性；

this.props.history.push('/');//重定向路由

5、路由权限控制 -> React没有相关API，都要自己写；

(1).登录相关：登录成功种cookie -> 其它页面查看 -> 若有cookie,正常跳转页面，若没有，提示框+跳转登录页面；

(2).页面获取数据：1.父组件向子组件传值；2.某页面将数据设置到浏览器存储中，一般为localStorage其获取到的是JSON对象，JSON.parse(localStorage.getItem('articleList')); -> 其它页面需要数据时，从存储中拿即可；

(3).高阶组件[包裹 -> 返回具有某功能的组件]

(4).Prompt组件 -> 进入/离开的时候都会进行询问；

[1].引入：import { Switch, Route, Redirect, Prompt } from 'react-router-dom';

[2].使用：; message= { () =>{ return true/false }}

补充：

(1).

;

(2).e.preventDefault();//React中阻止默认事件只有此方法；

(3).、组件最终都转换为a标签 -> React不能取别名，Vue可以 -> React可使用高阶组件来解决此类需求；