react 路由 2

一. 路由的跳转 

1. 标签跳转

在需要跳转的地方使用Link标签 进行跳转  

Link

注意:记得 引入  import {Link} from 'react-router-dom'

2.js 跳转

在方法中使用以下代码跳转

js跳转

二.路由的传参

1.params

在router 文件中配置  

在跳转时将地址写为 '/four/7'

接收参数时使用  this.props.match.params.xxx(根据配置 此处是id)

url

结果 能拿到url中的值

2.query

在router文件中配置为正常配置   

在跳转时  路径为一个对象 pathname为路径  query为一个对象  写参数

three.js

接收参数使用   this.props.location.query.xxx(根据填入对象的query  此处是name)

five.js

注意  只有跳转的时候query才能有参数   直接输入路径没有query 会报错   所以可以在componentDidMount钩子函数中取出参数赋值给state  

3.state  

使用方法和query几乎相同  将所有的query 改为state 就行了

在router文件中配置为正常配置   

在跳转时  路径为一个对象 pathname为路径 state为一个对象  写参数

接收参数使用   this.props.location.state.xxx(根据填入对象的state  此处是name)