react 路由 (Link 跳转和编程式路由)

Link - 路由跳转

基本使用

react 路由 (Link 跳转和编程式路由)_第1张图片
注意: Link标签应该写在HashRouter或BrowserRouter之间

传递动态路径参数

和vue匹配规则一致,都是:param.在获取参数的时,使用this.props.match.params.id 获取即可
react 路由 (Link 跳转和编程式路由)_第2张图片

传递查询参数

react 路由 (Link 跳转和编程式路由)_第3张图片react 路由 (Link 跳转和编程式路由)_第4张图片
注意: 这个查询参数并没有自动的转换为对象,需要你手动的处理;可以使用 quertstring 模块

路由跳转时to的值可以为一个对象

既可以传递动态路径参数也可以传递查询参数
react 路由 (Link 跳转和编程式路由)_第5张图片

this.props.history–编程式路由

在通过 Route 标签渲染的组件中,可以使用this.props.history 实现编程式路由。

在One组件中实现了编程式路由
react 路由 (Link 跳转和编程式路由)_第6张图片
push方法的参数可以为一个对象

this.props.history.push({pathname: '/three})

同时传递动态路径参数和查询参数:

this.props.history.push({pathname: '/three666?name=zs&sex=man'})
动态路径参数:666
查询参数:name=zs&sex=man

nz班

你可能感兴趣的:(react 路由 (Link 跳转和编程式路由))