主页

params 参数 *

  • 路由链接(携带参数):
{/* 传递 params 参数 */}
<Link to={`/home/message/dateil/Joe/18`}>详情</Link>
  • 注册路由(声明接收):
{/* 声明接收 params 参数 */}
<Route to='/home/message/detail/:name/:age' component={Detail} />
  • 接收参数
// 路由组件接收 params 参数
this.props.match.params // {name:'Joe', age: '18'}

search 参数

  • 路由链接(携带参数):
{/* 传递 search 参数 */}
<Link to={`/home/message/dateil/?name=Joe&age=18`}>详情</Link>
  • 注册路由(无需声明,正常注册即可):
{/* search 参数无需声明接收 */}
<Route to='/home/message/detail' component={Detail} />
  • 接收参数:
// 路由组件接收 search 参数
const { search } = this.props.location // "?name=Joe&age=18"

// 由于接收到的 search 参数是 urlencoded 编码字符串,不利于使用,需要借助 querystring 解析 search 参数
// 导入 querystring 库 parse() stringify() 
import qs from 'qs'
const { name, id } = qs.parse(search.slice(1))

state 参数

  • 路由链接(携带参数):
{/* 传递 state 参数 */}
<Link to={{pathname:'/home/message/dateil/', state:{name: 'Joe', age: 18}}>详情</Link>
  • 注册路由(无需声明,正常注册即可):
{/* state 参数无需声明接收 */}
<Route to='/home/message/detail' component={Detail} />
  • 接收参数:
// 路由组件接收 state 参数
this.props.location.state // {name:'Joe', age: 18}
刷新也可以保留住参数

React

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0

目录

来自 《React-向路由组件传递参数数据》
评论

Joe

博主很懒,啥都没有
175 文章数
14 评论量
3 分类数
178 页面数
已在风雨中度过 1年61天10小时43分