快捷導(dǎo)航

詳解React路由傳參方法匯總記錄

更新時(shí)間：2020年11月29日 11:00:53 作者：樂(lè)聞x

這篇文章主要介紹了詳解React路由傳參方法匯總記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

React中傳參方式有很多，通過(guò)路由傳參的方式也是必不可少的一種。

本文記錄項(xiàng)目中會(huì)用到的路由傳參方式：路由跳轉(zhuǎn)傳參API + 目標(biāo)路由獲取參數(shù)的方式。

一、動(dòng)態(tài)路由

跳轉(zhuǎn)方法

Link

 <Link to={{ pathname: "/user/add/1" }}>跳轉(zhuǎn)新增頁(yè)面</Link>

history.push

 this.props.history.push("/user/add/1");

獲參方法

this.props.match.params

二、路由query顯示參數(shù)

Link跳轉(zhuǎn)

<Link to={{ pathname: "/user/add", query: { id: 1 } }}>
     跳轉(zhuǎn)新增頁(yè)面
 </Link>

history.push

this.props.history.push({
       pathname: "/user/add",
       //參數(shù)
       query: { id: 1 },
      });

獲參方法

this.props.location.query

三、路由state隱式參數(shù)

Link跳轉(zhuǎn)

<Link to={{ pathname: "/user/add", state: { id: 1 } }}>
     跳轉(zhuǎn)新增頁(yè)面
    </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} />
    //動(dòng)態(tài)路由
    <Route path="/user/add/:id?" component={UserAdd} />
    {/* <Redirect to="/user" /> */}
   </BrowserRouter>
  );
 }
}

動(dòng)態(tài)路由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" }}>跳轉(zhuǎn)新增頁(yè)面</Link> */}
    <button
     onClick={() => {
      // 1.
      // this.props.history.push("/user/add/1");
      // 2.
      this.props.history.push({
       pathname: "/user/add/1",
      });
     }}
    >
     跳轉(zhuǎn)新增頁(yè)面
    </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顯示參數(shù)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 } }}>
     跳轉(zhuǎn)新增頁(yè)面
    </Link>
    <button
     onClick={() => {
      this.props.history.push({
       pathname: "/user/add",
       query: { id: 1 },
      });
     }}
    >
     跳轉(zhuǎn)新增頁(yè)面
    </button>
   </div>
  );
 }
}

路由state隱式參數(shù)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 } }}>
     跳轉(zhuǎn)新增頁(yè)面
    </Link>
    <button
     onClick={() => {
      this.props.history.push({
       pathname: "/user/add",
       state: { id: 1 },
      });
     }}
    >
     跳轉(zhuǎn)新增頁(yè)面
    </button>
   </div>
  );
 }
}