React是怎么实现路由传参的_程序开发

React是怎么实现路由传参的

创始人

2024-11-21 02:41:03

0次

一、动态路由

跳转方法

Link

 跳转新增页面

history.push

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

获参方法

this.props.match.params

二、路由query显示参数

Link跳转


     跳转新增页面

history.push

this.props.history.push({
       pathname: "/user/add",
       //参数
       query: { id: 1 },
      });

获参方法

this.props.location.query

三、路由state隐式参数

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 (
   
    
    //动态路由
    
    {/*  */}
   
  );
 }
}

动态路由Demo

User组件

import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class User extends Component {
 render() {
  return (
   
    User

    {/* 跳转新增页面 */}

); } }

UserAdd组件

import React, { Component } from "react";

export default class UserAdd extends Component {
 render() {
  console.log("this.props.match.params:", this.props.match.params);
  return UserAdd;
 }
}

React是怎么实现路由传参的

路由query显示参数Demo

User组件

import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class User extends Component {
 render() {
  return (
   
    User

    
     跳转新增页面

); } }

React是怎么实现路由传参的

路由state隐式参数Demo

User组件

import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class User extends Component {
 render() {
  return (
   
    User

    
     跳转新增页面

); } }

上一篇：Spring Cloud 实现下线的方法有哪些

下一篇：利用pandas赋值出现失败如何解决

React是怎么实现路由传参的

相关内容

热门资讯