路由传参方式
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