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 +
sessionStorage
Storage 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.