美文网首页
react-router-dom 路由传参

react-router-dom 路由传参

作者: 无疆wj | 来源:发表于2019-06-02 18:58 被阅读0次

1 路由动态参数

路由定义

<Route path="/component/:id" component={Component} />

Link定义

<Link to="/component/10">toComponent</Link>

Component 组件中接收参数

this.props.match.params.id // id == 10

2 Link组件 to:String

路由定义(一般定义规则)

<Route path="/" component={Component} />

Link定义

<Link to="/?sort=name">Zillow Group</Link>

Component 组件中接收参数

this.props.location.search // search == "?sort=name"

3 Link组件 to:Object

路由定义(一般定义规则)

<Route path="/component" component={Component} />

Link定义

let obj = {
  pathname: '/component',
  search: '?sort=name',
  query: { fromDashboard: 123 },
  state: { fromDashboard: 123 }
}
<Link to="{obj}">Zillow Group</Link>

Component 组件中接收参数

this.props.location.search // search == "?sort=name"
this.props.location.query // query == { fromDashboard: 123 }
this.props.location.state // state == { fromDashboard: 123 }

注意:
1 query 在页面刷新后 会消失
2 query 和 state都是隐式传递

相关文章

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • react-router-dom 路由传参

    1 路由动态参数 路由定义 Link定义 Component 组件中接收参数 2 Link组件 to:String...

  • vue路由 filters方法和filter过滤用法总结

    限制单行文字长度 路由传参写法 ---- 声明式 路由传参写法 ---- 编程式 路由传参写法 ---- 路由里要...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • vue-router

    路由安装 路由配置 路由跳转 路由传参-param使用params传参只能使用name进行引入http://loc...

  • Vue 动态路由

    动态路由 动态路由传参

  • vue中组件3种编程式路由跳转传参

    路由传参 1、路由配置传参(刷新页面不会丢失参数,url会携带参数) A组件跳转B组件传参A组件 路由配置 B组件...

  • vue路由传参.md

    两种传参方法 1.命名路由传参(name, params方式) 2.路由路径传参(path, query方式...

  • 路由传参

    路由传参

  • 八、Flutter路由

    目录一、基本路由二、基本路由传参三、命名路由四、命名路由传参五、替换路由六、返回到根路由 一、基本路由 跳转到De...

网友评论

      本文标题:react-router-dom 路由传参

      本文链接:https://www.haomeiwen.com/subject/hxtfxctx.html