前言：为什么要用react？-.-
react版本：16.12.0
react-dom版本：16.12.0
react-router-dom：5.1.2
为什么我要提我当前的版本？用过react的人应该深有体会，版本切记一定要匹配，我这里提到的方式并不一定适用其他版本，目前我下载的是最新的react及路由
Link标签传参
- {}是jsx的语法，我们要传的是对象，因此这个{}里面我们还需要写一个对象形式的
- vue里面指向地址的属性叫path，看到网上很多文章，react路由传参指向的属性也叫path，但是：目前react-router-dom：5.1.2指向地址的属性叫做pathname
第一种 pathname + search
- 这种形式的传参，会把参数拼接在hash路由的最后面，例如：http://localhost:3000/#/setting?search
- 优点：刷新也在........
- 缺点：只能传字符串，显式传参，不能传过大的数据，传递数据过多会让地址变的很丑
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 + state
- 这种形式的传参式隐式的，刷新页面就没有了
- 和任意属性一致，但是官方应该指定的是这个，因为刷新后location中会存在state: undefined，任意属性则不会
A页面
<Link to={{pathname: '/setting', state:{id:1}}}>jump --- state</Link>
// 取参
B页面
this.props.history.location.state.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形式传参及跳转
第一种 使用原生的方式
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这个属性的
