在简述react路由之前首先需要说的就是理由主要分为两类:前端路由和后端路由,其功能用法也不同.
1. **前端路由**:其主要功能是根据不同的URL路径去切换不同的组件.
2. **后端路由**:其主要功能是根据用户不同的请求返还不同的内容.
而react中所使用的就是前端路由,下面我就根据自身对react路由功能的了解进行一些简述:
首先要提到的是react路由的两种模式: 历史纪录模式 (BrowserRouter) 和 hash模式 (HashRouter) ,因为本人在日常的使用中主要使用的就是历史记录模式,所以今天写的内容也主要针对历史记录模式所写.
(1) 路由的安装和引用:
安装命令: npm install react-router-dom 或 yarn add react-router-dom;
引用: 首先需要引入历史记录模式的路由器组件 import {BrowserRouter as Router} from 'react-router-dom'
(2) 路由组件之路由器组件
Router即为路由器,一般添加在项目的最外层,该组件主要拥有以下两个属性:
1. basename: 为路由增加前缀
2. forceRefresh: 每次更新地址即要重新向服务器发送一次请求。强制刷新,对HashRouter不起作用。
import {BrowserRouter as Router} from 'react-router-dom'
<Router>根组件</Router>
(3) 路由组件之路由组件:
Route为路由组件:其主要功能是配置路由,决定所要渲染的组件,该组件主要有四个属性:
1. component: 指定渲染的组件
2. render: 指定要呈现的内容,该属性的值是一个函数根据返回值决定渲染的内容.
3. exact:是否要精确匹配,当不设置该值时path的只要匹配到开始的部分就会进行渲染,而不是进行全部匹配,类似于正则中的贪婪模式.
4. path: 指定地址,不区分大小写
import {Route} from 'react-router-dom'
<Route path={"/"} exact component={Home}></Route>
<Route path={"/order"} render={() => <div>组件</div>}></Route>
(4) 路由组件之导航组件 NavLink 和 Link:
NavLink 为导航组件: 其主要功能为设置组件的导航链接,该组件主要有四个属性:
1. to:指定跳转的地址 ,有两种格式 字符串 to={"/my"} 对象 to={{ pathname:"/my" }}
2. exact:是否要精确匹配
3. activeClassName : 指定导航选中后的class名
4. activeStyle : 指定导航选中后的style样式
而 Link组件 与 NavLink:Link组件的区别就是不包含exact,activeClassName,activeStyle属性,其他属性相同
import {NavLink,Link} from 'react-router-dom'
<NavLink className={"App-link"} exact activeStyle={{color: "red"}} to={"/"}>组件名</NavLink>
<Link exact to={"/"}>组件名</Link>
(5) 路由组件之重定向组件:
Redirect为重定向组件:其主要功能为利用重定向设置权限路由,当条件符合时使其重定向到另一个路由,其主要功能有两个:
1. to: 重定向指向的位置(地址)
2. from:满足重定向条件的地址
import {Redirect} from 'react-router-dom'
<Redirect to={"/my"} from={"/profile"}></Redirect>
(6) 路由组件之Switch组件:
Switch组件是一个容器组件,作用是在多个组件同时匹配时只渲染第一个
import {Switch} from 'react-router-dom'
<Switch>
<Route path={"/"} exact component={Home}></Route>
<Route path={"/my"} component={My}></Route>
<Redirect to={"/my"} from={"/profile"}></Redirect>
<Route path={"*"} component={()=><div>404,您找的页面不存在2</div>}></Route>
</Switch>
(7) 路由组件之高阶组件withRouter
withRouter是一个高阶组件(HOC),其本质是一个函数,该函数接收一个组件,返回一个组件。实现的主要功能是属性代理,负责给参数组件增加 history,location,match等三个属性后返回。因为在react中不是通过路由直接跳转的组件是没有这三属性的,在没有这个属性时也就无法通过路由进行传值.该高阶组件主要解决这个问题.
import {withRouter} from 'react-router-dom'
export default withRouter(JoinCarBtn);
(8) 路由切换组件增加的三个属性
1. history属性 该属性主要有以下几个方法
history.push(路径) 主要用于实现编程式导航
history. Listen 主要用于检测监控路由的变化
this.propos.history.listen((location)=>{
locatin.pathname
})
history.go(-1) 主要用于访问路由的历史记录
2. location属性 该属性主要有以下几个值
location.pathname 当前路径
location.search 获取查询字符串 ?a=xxx&b=yyy
location.state 接收路由传递的多个值
location.query 接收路由传递的多个值
3. match属性 该属性主要有以下几个值
match.params 用于获取路由的参数
(9) 路由传参:
主要有以下三种方法:
1. query传值:
<NavLink to={{pathname:"/one",query:{a:1,b:{c:3}}}}>组件名</NavLink>
接收方式: this.props.location.query
传值特点: 可以接受对象,但是刷新后数据不存在
2. state传值:
<NavLink to={{pathname:"/two",state:{a:10,b:{c:30}}}}>组件名</NavLink>
接收方式: this.props.location.state state 默认值是undefined
传值特点: 可以接受对象,但是刷新数据后不会丢失,但是重新时打开会丢失
3. param传值:
<NavLink to={{pathname:"/three/1/2"}}>组件名</NavLink>
<Route path={"/Three/:id/:type"} component={One}></Route>
接收方式: this.props.location.match.params params 默认值 {}
传值特点: 会更改路由地址,但刷新数据不会丢失,
**以上所述均为个人见解,如有错误敬请指出,谢谢**