React-向路由组件传递参数数据

7次阅读
没有评论

共计 928 个字符,预计需要花费 3 分钟才能阅读完成。

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}

刷新也可以保留住参数

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计928字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码