react路由传递参数的几种方法
企业开发
2023-04-08 23:59:30
阅读次数: 0
params参数
- 路由链接（携带参数）：
<Link to = {'/demo/test/tom/18'}> </Link >
- 注册路由（声明接收）：
<Route path= '/demo/test/:name/:age' component={Test} />
- 接收参数：
this.props.match.params
- 缺点：只能传字符串，不能传递对象，参数多导致url过长
search参数
- 路由链接（携带参数）：
<Link to = {'/demo/test?name='tom'&age=18'}></Link>
- 注册路由（无需声明接收）：
<Route path='/demo/test' component={Test} />
- 接收参数：
this.props.location.search
- 备注：接收到的search是
urlencoded编码字符串，需要qs解析
- 缺点：只能传字符串，不能传递对象，参数多导致url过长
query参数
- 路由链接（携带参数）：
<Link to = {
{ pathname: '/demo/test' , query: {name: 'tom',age:18} }}></Link>
- 注册路由（无需声明接收）：
<Route path='/demo/test' component={Test} />
- 接收参数：
this.props.location.query
- 优点：可以传递对象
- 缺点：
HashRouter刷新地址栏，参数丢失，BrowserRouter不会丢失参数
state参数
- 路由链接（携带参数）：
<Link to = {
{ pathname: '/demo/test' , state: {name:'tom',age:18} }}></Link>
- 注册路由（无需声明接收）：
<Route path='/demo/test' component={Test} />
- 接收参数：
this.props.location.state
- 优点：可以传递对象
- 缺点：
HashRouter刷新地址栏，参数丢失，BrowserRouter不会丢失参数
转载自blog.csdn.net/Dax1_/article/details/126445502