详解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 相关文章推荐
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
express.js中间件说明详解
Mar 19 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 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
实用函数9
2007/11/08 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
简介Django中内置的一些中间件
2015/07/24 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python中的元组介绍
2019/01/28 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
Python调用飞书发送消息的示例
2020/11/10 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
采购主管工作职责
2013/12/12 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
初二生物教学反思
2014/02/03 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js