1. 路由的跳转
-
1.1 在需要跳转的页面导入import {Link} from ‘react-router-dom’,在需要跳转的地方使用link标签的to属性进行跳转
<Link to="/组件名/:参数"></Link>
组件名—在路由中配置,
<Route path='compontent(组件名)' compontent={compontent(组件名)}></Route>
也可以使用this.props.history.push(’/compontent’)
2. 路由的传参
-
2.1 params传参
在路由配置中以/:的方式评接参数标识<Link to="/组compontent/:参数"></Link>
在被跳转页使用 接收参数(该写法是react hook)
-
2.2 query传参
在router文件中配置为正常配置
在跳转时 路径为一个对象{} 其中 pathname为路径 query为一个对象 对象里是携带的参数
使用props.location.query接收参数 -
2.3 state传参
使用props.location.state接收参数<Link to={{patnname :'component',state={name:" niuniu",age:2019}}></Link>
<div>{{props.location.state.name/age}}</div>