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可使用高阶组件来解决此类需求；
网友评论