React 学习笔记 day 7

路由

向路由组件传递参数

params参数

路由链接（携带参数）：<Link to={'/demo/test/tom/18'}>详情</Link>

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

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

search参数

路由链接（携带参数）：<Link to={'/demo/test?name=tom&age=18'}>详情</Link>

注册路由（无需声明，正常注册即可）：<Route path="/demo/test" component={Test} />

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

备注：获取到的search是urlencoded编码字符串，需要借助querystring解析（import qs from 'qs'）

state参数

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

注册路由（无需声明，正常注册即可）：<Route path="/demo/test?" component={Test} />

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

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

编程式路由导航

借助this.props.history对象上的API对操作路由跳转、前进、后退

• this.props.history.push()
• this.props.history.replace()
• this.p