路由传参方式

·  阅读 441

路由传参方式

1.params方式

参数不丢失但是需要一个个手动定义

this.props.history.push({pathname:`/detail/${id}`})
复制代码

获取参数

this.props.match.params.id
复制代码

路由文件中的配置

<Route path="/detail/:id/:orderId?" component={Detail} />
复制代码

1.1 params传参(刷新页面后参数不消失,参数会在地址栏显示)

路由页面:

注意要配置 /:id

<Route path='/demo/:id' component={Demo}></Route>  
复制代码

路由跳转并传递参数:

链接方式:
		<Link to={'/demo/'+'6'}>XX</Link>
或:<Link to={{pathname:'/demo/'+'6'}}>XX</Link>

js方式:
	 this.props.history.push('/demo/'+'6')  
或:this.props.history.push({pathname:'/demo/'+'6'})
复制代码

获取参数:

this.props.match.params.id    //注意这里是match而非history
或
import {useParams} from 'react-router-dom';
const params = useParams();
console.log(params); //{id:6}
复制代码

1.2 params传参(刷新页面后参数不消失,多个动态参数)

路由页面:

注意要配置 /:type/:id 这两个参数是必传

<Route path='/detail/:type/:id' component={Demo}></Route>  
复制代码

路由跳转并传递参数:

此时不传type和id跳转过去页面不出来,带参数的可以正常显示

链接方式:
<Link to="/detail">新增</Link> 
<Link to={`/detail/1/${record.id}`}>查看</Link>
<Link to={`/detail/2/${record.id}`}>编辑</Link>
或
<Link to={{pathname:`/detail/1/${record.id}`}}>查看</Link>

js方式:this.props.history.push({pathname:`/detail/1/${record.id}`})
复制代码

获取参数:

this.props.match.params     //结果 {type: '1', id: '1'}
复制代码

1.3 params传参,参数非必传(刷新页面后参数不消失,多个动态参数)

路由页面:

注意要配置 /:type? 加问号?

<Route path='/detail/:type?/:id?' component={Demo}></Route>  
复制代码

路由跳转并传递参数:

链接方式:
  <Link to="/detail">新增</Link>
  <Link to={`/detail/1/${record.id}`}>查看</Link>
  <Link to={`/detail/2/${record.id}`}>编辑</Link>
或:
<Link to={{pathname:`/detail/1/${record.id}`}}>查看</Link>
<Link to={{pathname:`/detail/2/${record.id}`}}>编辑</Link>

js方式:
	 this.props.history.push(`/detail/1/${record.id}`)  
或:this.props.history.push({pathname:`/detail/1/${record.id}`})
复制代码

获取参数:

注意这里是match而非history

获取参数:
this.props.match.params.id    
或
import {useParams} from 'react-router-dom';
const params = useParams();
console.log(params); //结果 {type: '2', id: '1'}
复制代码

2.search方式

也就是url方式,使用qs库将对象转化为url参数方式

this.props.history.push({
  pathname: `/detail`,
   search: qs.stringify({id:1, type:'edit'}),
 });
复制代码

获取参数

const { id } = qs.parse(this.props.location.search)
复制代码

3. query传参(刷新页面后参数消失)

路由页面:
<Route path='/demo' component={Demo}></Route>  //无需配置

路由跳转并传递参数:
链接方式:<Link to={{pathname:'/demo',query:{id:22,name:'dahuang'}}}>XX</Link>
<Link to={{ pathname: '/detail', query: { id: 1 } }}>查看</Link>
js方式:this.props.history.push({pathname:'/demo',query:{id:22,name:'dahuang'}})

获取参数: 
this.props.location.query.name
或
import { Link, useParams, useLocation } from 'react-router-dom';
const location = useLocation();
console.log(location);
复制代码

image-20211130003550593

4.state模式

刷新参数会丢失

this.props.history.push({
   pathname: `/detail`,
   state: {
     id: record.id,
     type: 1,
   },
 });
复制代码

获取参数

this.props.location.state.id
复制代码

返回上一页

this.props.history.go(-1)
复制代码

state传参demo

刷新页面后获取不到参数,state传的参数是加密的,比query传参好用

路由页面:
<Route path='/demo' component={Demo}></Route>  //无需配置参数名

路由跳转并传递参数:
链接方式: <Link to={{pathname:'/demo',state:{id:12,name:'dahuang'}}}>XX</Link> 
js方式:this.props.history.push({pathname:'/demo',state:{id:12,name:'dahuang'}})


获取参数: 
this.props.location.state.name
或
import {useParams} from 'react-router-dom';
const location = useLocation();
console.log(location.state);
复制代码
分类:
前端