详解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 相关文章推荐
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
js使用ajax读博客rss示例
May 06 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
Layui表格监听行单双击事件讲解
Nov 14 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+phpStorm+xdebug配置方法
2015/09/17 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
PHP 文件上传限制问题
2019/09/01 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
ReactNative页面跳转实例代码
2016/09/27 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
Python编写电话薄实现增删改查功能
2016/05/07 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
优秀学生干部先进事迹材料
2014/05/26 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
九寨沟导游词
2015/02/02 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript