A brief discussion on several ways to pass parameters in react routing

A brief discussion on several ways to pass parameters in react routing

The first parameter passing method is dynamic routing parameter passing.

By setting the path attribute of the link, the route is passed. When the link tag is clicked, the entire URL passed will be displayed in the URL address above

<Link to='/home?name=dx'>Home</Link>

If you want to actually get the passed parameters, you need to do it in the corresponding subcomponent
this.props.location.search gets the string and then manually parses it

Because the parameters can be seen by the user, it is troublesome to pass and obtain them, so it is not recommended

The second parameter passing method: implicit routing parameter passing

<Link to={{
     pathname: 'about',
     state: {
      name: 'dx'
     }
    }}>About</Link>

The so-called implicit route parameter passing means that the parameter information is not exposed in the URL. When you click the link tag, if you want to get the passed parameters, you can get them through this.props.location.state in the corresponding route component.

Recommended, safer, and more convenient to obtain the passed parameters

The third parameter passing method is to pass parameters between components

When to use?
When a routing component needs to receive parameters from a parent component

Modify the way route tags activate components through component attributes. Normally, route tags are used in routing.

//Succinct and clear, but unable to receive parameters from parent component <Route path='/test' component={Test}></Route>

After the transformation

<Link to='/test'>Test</Link>
<Route path='/test' render={(routeProps) => {
 //routeProps is the parameter return passed by the routing component (
     //In the case of the original routing component parameters, expand the binding of the parameters passed by the parent component to the child component <Test {...routeProps} name='dx' age={18} />
     )
 }}></Route> 



When the link tag is clicked, this.props in the corresponding test subcomponent obtains the parameters passed from the parent component and the parameters of the routing component itself. It is highly recommended that the parameters are slightly troublesome to pass, and the parameters received are very convenient. In addition, the parameters of the routing component itself can still be received, which is safe and will not be seen by users.

The fourth parameter passing method withRouter high-order component binds routing parameters to child components

When to use withRouter?

If you want to get the route parameters in a subcomponent, you must use the subcomponent of the route tag in the route to be bound to the route parameters.

In order to solve the problem of obtaining routing parameters for subcomponents that are not bound by route tags, you need to use withRouter

Generally used on buttons such as return to home page and return to previous level.

import React from 'react';
import BackHome from './backhome';
export default class Test extends React.Component {
 render () {
  console.log(this.props)
  return (
   <div>
    This is the content of the test //The button to return to the home page is not rendered through the route tag, so there is no route parameter in this.props of the subcomponent <BackHome>Return to the home page</BackHome> 
   </div>
  )
 }
}

import React from 'react';
//Import withRoute
import {withRouter} from 'react-router-dom';
class BackHome extends React.Component {
 goHome = () => {
  //The component must have routing parameters and methods in this.props when using withRouter //Otherwise, an error will be reported this.props.history.push({
   pathname: '/home',
   state: {
    name: 'dx' //Similarly, you can pass parameters to the component corresponding to the home route through state}
  })
 }
 render () {
  return (
   <button onClick={this.goHome}>this.props.children</button>
  )
 }
}
//When exporting, use the withRouter tag to pass the backHome component as a parameter export default withRouter(BackHome)

It is very important when you need to use it, so it is still recommended.

This concludes this article on several ways to pass parameters in react routing. For more relevant content on passing parameters in react routing, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of React routing parameter transfer method summary record
  • React component communication routing parameter transfer (react-router-dom)

<<:  Summary of ten principles for optimizing basic statements in MySQL

>>:  Linux kernel device driver virtual file system notes

Recommend

How to configure virtual user login in vsftpd

yum install vsftpd [root@localhost etc]# yum -y i...

Linux Operation and Maintenance Basic System Disk Management Tutorial

1. Disk partition: 2. fdisk partition If the disk...

Windows Server 2016 Standard Key activation key serial number

I would like to share the Windows Server 2016 act...

MySQL database implements MMM high availability cluster architecture

concept MMM (Master-Master replication manager fo...

How to build a complete samba server in Linux (centos version)

Preface smb is the name of a protocol that can be...

Detailed Analysis of Explain Execution Plan in MySQL

Preface How to write efficient SQL statements is ...

Sample code for making a drop-down menu using pure CSS

Introduction: When I looked at interview question...

Detailed explanation of nginx's default_server definition and matching rules

The default_server directive of nginx can define ...

Details of Linux file descriptors, file pointers, and inodes

Table of contents Linux--File descriptor, file po...

Method of realizing automated deployment based on Docker+Jenkins

Use Code Cloud to build a Git code storage wareho...

Detailed tutorial on installing and configuring MySQL 5.7.20 under Centos7

1. Download the MySQL 5.7 installation package fr...

Six methods for nginx optimization

1. Optimize Nginx concurrency [root@proxy ~]# ab ...

A brief talk about the diff algorithm in Vue

Table of contents Overview Virtual Dom principle ...