Several ways to pass parameters in react routing
Enterprise
2023-04-09 01:04:37
views: null
params parameter
- Routing link (carrying parameters):
<Link to = {'/demo/test/tom/18'}> </Link >
- Register route (declare receive):
<Route path= '/demo/test/:name/:age' component={Test} />
- Receive parameters:
this.props.match.params
- Disadvantages: only strings can be passed, objects cannot be passed, and the url is too long due to too many parameters
search parameter
- Routing link (carrying parameters):
<Link to = {'/demo/test?name='tom'&age=18'}></Link>
- Register routes (no need to declare receive):
<Route path='/demo/test' component={Test} />
- Receive parameters:
this.props.location.search
- Remarks: The received search is
urlencodedan encoded string, which needs to be parsed by qs
- Disadvantages: only strings can be passed, objects cannot be passed, and the url is too long due to too many parameters
query parameter
- Routing link (carrying parameters):
<Link to = {
{ pathname: '/demo/test' , query: {name: 'tom',age:18} }}></Link>
- Register routes (no need to declare receive):
<Route path='/demo/test' component={Test} />
- Receive parameters:
this.props.location.query
- Advantages: can pass objects
- Disadvantages:
HashRouterRefresh the address bar, parameters are lost, BrowserRouterno parameters will be lost
state parameter
- Routing link (carrying parameters):
<Link to = {
{ pathname: '/demo/test' , state: {name:'tom',age:18} }}></Link>
- Register routes (no need to declare receive):
<Route path='/demo/test' component={Test} />
- Receive parameters:
this.props.location.state
- Advantages: can pass objects
- Disadvantages:
HashRouterRefresh the address bar, parameters are lost, BrowserRouterno parameters will be lost
Origin blog.csdn.net/Dax1_/article/details/126445502