react 路由跳转和传值

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>
  

  在被跳转页使用props.match.params.xxx 接收参数(该写法是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>