记录下react路由传参的几种方式

前沿：跳转分两种情况，然后这两种情况又有不同参数

一。html的方式跳转（Link标签）

第一种 pathname + query

• 这种形式的传参式隐式的（url看得到参数，类似get请求数据）
• 【跳转新页面】不会丢失query参数（即target='_blank'）- dva/router

A页面
<Link to={{pathname: '/setting', query:{id:1}}}>jump --- query</Link>
// 取参
B页面
this.props.history.location.query.id

第二种 pathname + state

• 这种形式的传参式隐式的（url看不到参数，类似post请求数据）（刷新页面就没有了？不懂这是啥情况）
• 和任意属性一致，但是官方应该指定的是这个，因为刷新后location中会存在state: undefined，任意属性则不会
• 【跳转新页面】会丢失state参数（即target='_blank'）

A页面
<Link to={{pathname: '/setting', state:{id:1}}}>jump --- state</Link>
// 取参
B页面
this.props.history.location.state.id

第三种 pathname + search

• 这种形式的传参，会把参数拼接在hash路由的最后面，例如：http://localhost:3000/#/setting?search
• 优点：刷新也在........
• 缺点：只能传字符串，显式传参，不能传过大的数据，传递数据过多会让地址变的很丑（url看得到参数，类似get请求数据）

A页面
<Link to={{pathname: '/setting', search:'id=1'}}>jump --- search</Link>
// 取参
B页面
this.props.history.location.search

第四种 pathname + 任意属性

• 这种形式的传参式隐式的，刷新页面就没有了
• 刷新之后会发现location下会多出一个state: undefined

A页面
<Link to={{pathname: '/setting', abc:{id:1}}}>jump --- query</Link>
// 取参
B页面
this.props.history.location.abc.id

第五种(错误示范) pathname + 拼接

• 我想到这种方式，感觉会和search一样，但是实际上，跳转过去页面并未匹配到，刷新之后才会出现，因此search的传参只能按照上述的第一种pathname + search的方式，有找出问题所在的朋友请不吝赐教

A页面
let params = 'a=1&b=2';
<Link to={{pathname: `/setting?${params }`}}>jump --- 拼接</Link>
// 取参
B页面
this.props.history.location.search

第六种 pathname + params

• 配合动态路由传参
• 优缺点同第三种pathname + search的方式

// 动态路由后面加?表示可选，不加表示必选
<Route path="/setting/:id?" component={Setting}></Route>
A页面
let id = 1;
<Link to={{pathname: `/setting/${id}`}}>jump --- params</Link>
// 取参
B页面
this.props.history.match.params.id

二。js形式传参及跳转

(路由组件可以直接用，非路由组件要使用withRouter，"dva1.2.1"使用hashHistory)

第一种 使用原生的方式

window.location.hash = '/setting'
// 拼接search参数
window.location.hash = '/setting?a=1'
// 取值
this.props.history.location.search

第二种 pathname + search

• 同Link的解释
• 这里的search也不能手动拼接，需要按照要求，同Link跳转错误尝试一致

this.props.history.push({
  pathname: '/setting',
  search: 'a=1'
})
// 取参
this.props.history.location.search

第三种 pathname + state

• 同Link的解释

this.props.history.push({
  pathname: '/setting',
  state: {
    id: 1
  }
})
// 取参
this.props.history.location.state.id

第四种 pathname + 任意属性

• 同Link的解释

this.props.history.push({
  pathname: '/setting',
  abc: {
    id: 1
  }
})
// 取参
this.props.history.location.abc.id

当一个路由点击多次，将会出现警告，使用replace，这样会替换历史记录中上一次相同路由记录，而push会添加新的相同记录进去，hash路由会有这个问题，Browser形式的则不会

Link + replace

<Link to="/setting" replace/>

js

this.props.history.replace('/setting')

注意

• 非<Route path="/setting" component={Setting}>这种形式，也就是说不是通过Route配置的组件，是访问不到this.props.history这个属性的

参考：

1.React Router页面传值的三种方法及Link的小坑
2.react路由传参的几种方式
3.React Router 5.1 发布，React 路由解决方案