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!