详解React路由传参方法汇总记录
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了详解React路由传参方法汇总记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
React中传参方式有很多，通过路由传参的方式也是必不可少的一种。
本文记录项目中会用到的路由传参方式： 路由跳转传参API + 目标路由获取参数的方式。
一、动态路由
跳转方法
Link
<Link to={{ pathname: "/user/add/1" }}>跳转新增页面</Link>
history.push
this.props.history.push("/user/add/1");
获参方法
this.props.match.params
二、路由query显示参数
Link跳转
<Link to={{ pathname: "/user/add", query: { id: 1 } }}>
跳转新增页面
</Link>
history.push
this.props.history.push({
pathname: "/user/add",
//参数
query: { id: 1 },
});
获参方法
this.props.location.query
三、路由state隐式参数
Link跳转
<Link to={{ pathname: "/user/add", state: { id: 1 } }}>
跳转新增页面
</Link>
history.push
this.props.history.push({
pathname: "/user/add",
state: { id: 1 },
});
获参方法
this.props.location.state
代码DEMO
入口App组件
class App extends React.Component {
render() {
return (
<BrowserRouter>
<Route path="/user" exact component={User} />
//动态路由
<Route path="/user/add/:id?" component={UserAdd} />
{/* <Redirect to="/user" /> * 上一篇：JavaScript实现商品评价五星好评
下一篇：基于jQuery拖拽事件的封装