react 路由组件传递参数

在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。但如果清除浏览器数据后刷新也会丢失。