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

Posted 2023-03-14

参考技术A 1、React-Router-dom;

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

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

(3).<Route path="" component= ></Route>;

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

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

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

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

(6).路由跳转<Link to="">; <NavLink to="">;// 最终都转换为<a>标签，但不能取别名，Vue中使用tag属性可以取别名；<NavLink>优势：其跳转页面，系统会自动加类名.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].使用：<Prompt message="" ></Prompt>; message= () => return true/false

补充：

(1).<form onSubmit= this.handleSubmit ></form>;

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

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