路由传参方式

最新推荐文章于 2025-04-07 10:14:53 发布

LittleRoundFace

最新推荐文章于 2025-04-07 10:14:53 发布

阅读量970

点赞数

分类专栏： react 文章标签：前端 react.js

本文链接：https://blog.youkuaiyun.com/LittleRoundFace/article/details/121448573

版权

react 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了React.js中四种路由传参方式：params、search、query和state。重点讲解了params方式，包括参数不丢失的情况，多个动态参数的传递，以及参数非必传的处理。同时提到search方式使用qs库转化URL参数，query传参刷新后参数消失，以及state模式下参数刷新后会丢失的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由传参方式

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>
js方式：this.props.history.push({pathname:'/demo',query:{id:22,name:'dahuang'}})

获取参数： 
this.props.location.query.name
或
import {useParams} from 'react-router-dom';
const location = useLocation();
console.log(location.state);

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);