详解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快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
javascript 常见功能汇总
Jun 11 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
js完整倒计时代码分享
Sep 18 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
js中!和!!的区别与用法
May 09 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
php+mysql 实现身份验证代码
2010/03/24 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
实例讲解php数据访问
2016/05/09 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
简单了解什么是神经网络
2017/12/23 Python
简述Python2与Python3的不同点
2018/01/21 Python
Python对象转换为json的方法步骤
2019/04/25 Python
python实现计算器功能
2019/10/31 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
夜大自我鉴定
2013/10/31 职场文书
英文自荐信
2013/12/19 职场文书
教师求职信范文
2014/05/24 职场文书
企业环保标语
2014/06/10 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
通知书大全
2015/04/27 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
开学典礼观后感
2015/06/15 职场文书
党员反邪教心得体会
2016/01/15 职场文书