react路由传参的几种方式

前言：为什么要用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这个属性的