React RouterLink传参

导入 import { Link } from 'react-router-dom'; 

1. params

<Link to={`/index (需要的页面) /${item.filmId}`}>xxx</Link>
例子:<Link to={`/index /${item.filmId}`}>

<Route path='/index/:filmId'  路由接收/>
 例子:export default {
  path: 'index /:filmId',
 };

读取参数用:this.props.match.params.filmId

例子: this.setState({
filmId:this.props.match.params.filmId
})

2. query

<Route path='/index'/> 路由地址
<Link to={{ path : ' /index' , query : { name : 'sunny' }}}>

读取参数用: this.props.location.query.name

建议这样写:

let query = {
        pathname: '/页面路由地址' 
        name: 'xxxx '  我是参数
}

 Link组件 <Link to={query}>query页面传参</Link>

读取参数用: this.props.location.query.name

3.state

 <Route path='/sort'/>页面路由地址
  <Link to={{ path : ' /sort ' , state : { xxx: 'xxx' 这里是传递的参数 }}}> 

读取参数用: this.props.location.query.state.xxx 获取参数

建议这样写

  let state = {
        pathname: '/address',  页面路由地址
        name: '参数'
    }
<Link to={state }>state页面传参</Link>

参数获取：this.props.location.state.name参数