50.React jump parameter passing route and the difference between the three methods

1. The routing table: Parameter address bar

<The Route path = "/ List /: ID" Component List} = {/>
HTML: <Link to = '/ List / 2'> jump list page </ Link>
Js: this.props.history.push ( ' / List / 2 ');
List received page:
the console.log (this.props.match.params.id) // pass over all parameters

 

2.query Method: Parameter address bar is not displayed, the refresh address bar, missing parameters
HTML:
<= {{pathname to Link: '/ List', Query: {name: 'XLF'}}}> jump list page </ Link>
Js manner: this.props.history.push ({pathname: '/ List', Query: {name: 'Sunny'}})
List received page:
the console.log (this.props.location.query.name) // pass over all parameters

 

3.state Method: Parameter address bar is not displayed, the refresh address bar, parameters are not lost
Html: <Link to = {{ pathname: '/ list', state: {name: 'xlf'}}}> jump list page < / Link>
JS: this.props.history.push ({pathname: '/ List', State: {name: 'Sunny'}})
List page received
console.log (this.props.location.state.name) / / All the passed parameters

Guess you like

Origin www.cnblogs.com/xlfdqf/p/12098520.html