路由传参方式

路由传参方式

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.p