React路由详解

Posted 2021-08-31 老张在线敲代码

React-Router

route是路由
router是路由器

路由引入包

react-router路由是用来给移动端的react-native使用的插件库

react-router-dom是专门给web开发使用的路由插件库

路由工作原理

用户点击nav后开始检测对应路径，检测到之后就直接更换路径跳转另一个路径，检测不到则重定向到空白页或者自定义404页面
每一个路径就代表着一个组件

每个路由都是由key：value组合组成的

路由路径就是key，value是组件的页面内容

history属性（原生Bom浏览器对象中的属性）

路由的history中的push方法切换是根据栈得原理进行的（先进后出）

replace方法是替换掉当前路由的路径及历史记录

hash值（操作锚点，不常用）

路由组件跟一般组件的区别

1.写法不同：

一般组件：<List/>
路由组件：<Route path="/list" component={List}>

2.接收到的props不同：

一般组件：写组件标签的时候传递了什么就能接收到什么

路由组件：接收到三个固定的属性：history，location，match

//删减版
//能用到的属性如下
history:
	go: ƒ go(n)
	goBack: ƒ goBack()
	goForward: ƒ goForward()
	push: ƒ push(path, state)
	replace: ƒ replace(path, state)
location:
	pathname: "/test"
	search: ""
	state: undefined
match:
	params: {}
	path: "/test"
	url: "/test"
	staticContext: undefined

属性及标签

path属性

Route组件的path属性指定路由的匹配规则

Redirect 组件

redirect输入一个不存在的地址时候返回设置的默认页

exact属性

精准匹配，有俩个值，true或false，true为严格匹配，false为正常匹配

NavLink标签跳转

NavLink使用时会产生一个active的类名可以用于进行高亮或当前样式的显示

Link则跟html中的a标签跳转功能类似，相当于react中的a标签href跳转

switch标签的作用：防止多个路由组件的情况下匹配多次，用switch包裹路由组件匹配到了就不会继续往下匹配

路由跳转方式

声明式跳转

直接通过NavLink上面的to属性指定地址进行跳转

编程式跳转
使用的时候一定要主要当前组件必须是有路由状态的（在路由配置中当前组件有挂载），没有路由状态啧不能使用js进行跳转

this.props.history.replace("地址")

路由传参

params传参【常用】

  // this.props.match.params.id 接收参数
 //在路由配置中以/：的方式评接参数标识id

state传参
this.props.location.state接收参数

 <div>{  pathname: `/webRouter/${id}`,state: { id: 3 }}</div> 

query传参

1、在router文件中配置为正常配置 <Route path="/Child03" component={Child03}/>
2、在跳转时 路径为一个对象{} 其中 pathname为路径 query为一个对象 对象里是携带的参数
3、使用this.props.location.query接收参数

whithRouter的作用和场景

首先他可以让当前的一个没有路由状态的组件拥有路由状态