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" /> */} </BrowserRouter> ); } }
动态路由Demo
User组件
import React, { Component } from "react"; import { Link } from "react-router-dom"; export default class User extends Component { render() { return ( <div> <div className="user">User</div> {/* <Link to={{ pathname: "/user/add/1" }}>跳转新增页面</Link> */} <button onClick={() => { // 1. // this.props.history.push("/user/add/1"); // 2. this.props.history.push({ pathname: "/user/add/1", }); }} > 跳转新增页面 </button> </div> ); } }
UserAdd组件
import React, { Component } from "react"; export default class UserAdd extends Component { render() { console.log("this.props.match.params:", this.props.match.params); return <div>UserAdd</div>; } }
路由query显示参数Demo
User组件
import React, { Component } from "react"; import { Link } from "react-router-dom"; export default class User extends Component { render() { return ( <div> <div className="user">User</div> <Link to={{ pathname: "/user/add", query: { id: 1 } }}> 跳转新增页面 </Link> <button onClick={() => { this.props.history.push({ pathname: "/user/add", query: { id: 1 }, }); }} > 跳转新增页面 </button> </div> ); } }
路由state隐式参数Demo
User组件
import React, { Component } from "react"; import { Link } from "react-router-dom"; export default class User extends Component { render() { return ( <div> <div className="user">User</div> <Link to={{ pathname: "/user/add", state: { id: 1 } }}> 跳转新增页面 </Link> <button onClick={() => { this.props.history.push({ pathname: "/user/add", state: { id: 1 }, }); }} > 跳转新增页面 </button> </div> ); } }
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 郑亚弦.2024-隔壁包厢603(EP)【发现梦想】【FLAC分轨】
- 文章.2004-被遗忘的时光【华博音乐】【WAV+CUE】
- 群星《青葱韶歌》原力计划·毕业季企划合辑[FLAC+分轨][661M]
- 群星《抖烧 DSD》抖音神曲 [WAV分轨][992M]
- 庾澄庆《哈林天堂》索尼音乐[WAV+CUE][1G]
- 英雄联盟全球总决赛多久打一次 全球总决赛举办频率介绍
- 第二届老头杯什么时候开始选人 第二届老头杯选人时间介绍
- 英雄联盟第二届老头杯什么时候开始 老头杯s2赛程时间队伍名单汇总
- AI赋能卓越显示技术共筑数字未来:三星显示器产品矩阵亮相2024进博会
- 技术剖析:天玑9400如何打造移动最强GPU和游戏体验?
- 顶级装备 实力登顶:三星显示器双十一焕新升级最后冲刺
- 陈影《绝色靓声》WAV+CUE
- 龚玥《禅是一枝花(6N纯银SQCD)》原抓WAV+CUE
- 刘德丽《寂寞在唱歌HQCD+A2HD5》[WAV+CUE]
- 萧亚轩《钻石糖》金牌大风[WAV+CUE][989M]