美文网首页
react --- 路由跳转、路由传参

react --- 路由跳转、路由传参

作者: 再回首已落幕 | 来源:发表于2021-03-17 17:25 被阅读0次

一、路由跳转
1、a标签跳转

 import { Link } from "react-router-dom";
<Link to="/map">go map</Link>

2、js跳转

this.props.history.push("/map");

一、路由传参
1、state(不消失)

// 传
this.props.history.push({ pathname: '/fag',state:{id:6666}});
// 取
console.log(this.props.location.state.id)

2、params(不消失)

{
    path: "/fag/:id",
    component: Faq,
}
this.props.history.push({ pathname: `/fag/${6666}`});
console.log(this.props.match.params.id)

3、query(会消失)

this.props.history.push({ pathname: '/fag',query:{id:6666}});
console.log(this.props.location.query.id)

相关文章

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

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

  • Vue实战第二天

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

  • vue-router

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

  • react --- 路由跳转、路由传参

    一、路由跳转1、a标签跳转 2、js跳转 一、路由传参1、state(不消失) 2、params(不消失) 3、q...

  • 八、Flutter路由

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

  • Vue-Router

    1. 路由配置 默认路由跳转 在 new Router时可用的配置参数: 2.路由传参 Vue路由传参的几种方式 ...

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

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

  • react路由跳转、传参

    1、路由的跳转 一、DOM跳转 在需要跳转的页面导入import {Link} from 'react-route...

  • react路由传参、路由跳转方式

    普通路由传参的方式 search params 通过state dva路由跳转 .从props取出并传递histo...

  • react路由跳转传参方式

    react在路由跳转进行传参有以下几种方式:1. params方式传参app.js 子组件OnRefs.js 组件...

网友评论

      本文标题:react --- 路由跳转、路由传参

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