在react中,路由组件传递参数的方式有三种,分别使用params、search、state
params传参
路由链接(携带参数):<Link to={`/demo/detail/tom/18`}>详情</Link>
注册路由(携带参数):<Route path="/demo/detail/:name/:age" component={Detail} />
接收参数:const params = this.props.match.params
search传参
路由链接(携带参数):<Link to={`/demo/detail?name=tom&age=18`}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path="/demo/detail" component={Detail} />
接收参数:const search = this.props.location.search
备注:获取到的search
是urlencoded
编码字符串,需要借助querystring
剖析
state传参
路由链接(携带参数):<Link to={{pathname:"/demo/detail",state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path="/demo/detail" component={Detail} />
接收参数:const search = this.props.location.state
备注:刷新页面是state是不会丢失的,因为state是写入了location。但如果清除浏览器数据后刷新也会丢失。