When using React for a project, I encountered a value transfer problem with React routing. There are two common solutions to React routing.

1 Path transfer

The more common by value, its form is/someroute: param1 / : param2.

Advantages:

  • Define simple
  • Easy to use

Inadequate:

  • Long url
  • The data exposed
  • Only basic types can be passed; objects and other types cannot pass values

Usage:

  • On the route Definition page
// -------------- is followed by other logical codes ----------------------
<Route path="/someroute/:param1/:param2"></Route>
// -------------- is followed by other logical codes ----------------------
Copy the code
  • On navigation page
// -------------- is followed by other logical codes ----------------------
<Link to="/someroute/var1/var2"></Link>
// -------------- is followed by other logical codes ----------------------
Copy the code
  • On the new page
// -------------- is followed by other logical codes ----------------------The first argument is: {this. Props. Location. Match. Param1} the second argument is: {this.props.location.match.param2}
// -------------- is followed by other logical codes ----------------------
Copy the code

2 the state value

This value transfer mode is commonly used when there are many parameters to be transferred or the parameter types are complex.

Advantages:

  • The data is not exposed in the URL
  • The routing and value transmission of object data is solved

Inadequate:

  • When you click Refresh on a new page, the previous values are not retained

Solution:

  • Use state to pass the value +sessionStorageStorage parameters

Usage:

  • On the route Definition page
// -------------- is followed by other logical codes ----------------------
<Route path="/someroute"></Route>
// -------------- is followed by other logical codes ----------------------
Copy the code
  • On navigation page
// -------------- is followed by other logical codes ----------------------
<Link to={{ pathname: '/someroute'.state: { param1: var1, param2: var2 } }}></Link>
// -------------- is followed by other logical codes ----------------------
Copy the code
  • On the new page
/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- in the constructor -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
if (this.props.location.state) {
    // Make sure to change sessionStorage the first time you pass a parameter to a new page
    window.sessionStorage.setItem('param1'.this.props.location.state.param1);
    window.sessionStorage.setItem('param2'.this.props.location.state.param2);
}
/ / -- -- -- -- -- -- -- -- -- -- -- -- -- - end of the constructor -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
// -----------------------------------------------------
// -------------- is followed by other logical codes ----------------------The first argument is: {window.sessionStorage.getItem('param1'} The second argument is: {window.sessionStorage.getItem('param2')}
// -------------- is followed by other logical codes ----------------------
Copy the code

3 summary

The preceding two methods can meet the requirements of common projects for routing parameters.

There is another way to use Redux to unify a global routing object and operate on it every time a parameter needs to be passed. This kind of thinking can be used in routing parameters of small programs, which is not common in Web development.