详解React路由传参方法汇总记录


Posted in Javascript onNovember 29, 2020

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

详解React路由传参方法汇总记录 

路由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>
  );
 }
}

详解React路由传参方法汇总记录 

路由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>
  );
 }
}

详解React路由传参方法汇总记录

到此这篇关于详解React路由传参方法汇总记录的文章就介绍到这了,更多相关React路由传参内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
javascript自执行函数
Feb 10 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
个人小程序接入支付解决方案
May 23 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
基于jQuery拖拽事件的封装
Nov 29 #jQuery
原生js+canvas实现验证码
Nov 29 #Javascript
原生js实现弹幕效果
Nov 29 #Javascript
javascript实现点击小图显示大图
Nov 29 #Javascript
js实现简易点击切换显示或隐藏
Nov 29 #Javascript
webpack4从0搭建组件库的实现
Nov 29 #Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
谈谈新手如何学习PHP
2006/12/14 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
浅析node.js中close事件
2014/11/26 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
Shell如何接收变量输入
2012/09/24 面试题
初二学习计划书范文
2014/04/27 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
公司股份合作协议书
2014/12/07 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
学习与创新自我评价
2015/03/09 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
移除Selenium中window.navigator.webdriver值
2022/06/10 Python