向路由组件传递参数的三种方式

1.params参数

              路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link>

              注册路由(声明接收):<Route path="/demo/test/:name/:age" component={Test}/>

              接收参数:this.props.match.params

2.search参数

               路由链接(携带参数):<Link to='/demo/test?name=tom&age=18'}>详情</Link>

               注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>

               接收参数:this.props.location.search

               备注:获取到的search是urlencoded编码字符串,需要借助querystring解析

3.state参数

                路由链接(携带参数):<Link to={ {pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>

                注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>

                接收参数:this.props.location.state

                备注:刷新也可以保留住参数

猜你喜欢

转载自blog.csdn.net/qq_38499019/article/details/119877798