前沿：跳转分两种情况，然后这两种情况又有不同参数
一。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 路由解决方案
网友评论