一. 路由的跳转
1. 标签跳转
在需要跳转的地方使用Link标签 进行跳转
Link
注意:记得 引入 import {Link} from 'react-router-dom'
2.js 跳转
在方法中使用以下代码跳转
js跳转
二.路由的传参
1.params
在router 文件中配置 <Route path="/four/:id" component={Four}/>
在跳转时将地址写为 '/four/7'
接收参数时使用 this.props.match.params.xxx(根据配置 此处是id)
url
结果 能拿到url中的值
2.query
在router文件中配置为正常配置 <Route path={'/five'} component={Five}/>
在跳转时 路径为一个对象 pathname为路径 query为一个对象 写参数
three.js
接收参数使用 this.props.location.query.xxx(根据填入对象的query 此处是name)
five.js
注意 只有跳转的时候query才能有参数 直接输入路径没有query 会报错 所以可以在componentDidMount钩子函数中取出参数赋值给state
3.state
使用方法和query几乎相同 将所有的query 改为state 就行了
在router文件中配置为正常配置 <Route path={'/five'} component={Five}/>
在跳转时 路径为一个对象 pathname为路径 state为一个对象 写参数
接收参数使用 this.props.location.state.xxx(根据填入对象的state 此处是name)
