React路由传参方法有哪些？我们知道React中传参方式有很多，通过路由传参的方式也是必不可少的一种。因此，这篇文章就给大家分享一下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>
  );
 }
}

    关于React路由传参方法就介绍到这，上述实例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多React路由传参方法的内容，大家可以关注其它的相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 使用vue如何实现表格合并的效果？一文带你了解思路及代码

  今天给大家分享的是关于使用vue实现表格合并的功能，表格合并详细大家应该都比较熟悉，我们在Excel中常会用到的。下文有使用vue实现表格合并功能的代码及思路，感兴趣的朋友可以参考了解看看。

• js是如何使用正则验证URL

  当开发者需要为不同目的以不同形式处理URL时，我们经常会借助于JavaScript。本文就为大家整理了JavaScript验证URL的方法，希望对大家有所帮助

• JavaScript迭代器如何理解，怎样实现自定义

  本篇文章给大家带来了JavaScript中关于迭代器的相关知识，下面我们就一起来看一下什么是迭代器又怎样自定义迭代器，希望对大家有帮助。

• JavaScript变量的用法是怎样，命名规范有哪些

  这篇文章主要介绍了如何理解JavaScript中的变量，帮助大家更好的学习JavaScript，感兴趣的朋友可以了解下

• attribute和property是什么，用法是怎样

  property 和 attribute非常容易混淆，两个单词的中文翻译也都非常相近（property：属性，attribute：特性），但实际上，二者是不同的东西，属于不同的范畴。