编程式路由导航和withRouter

编程式路由导航

如果想使用按钮实现路由跳转，有两种形式，可回退和不可回退两种：

由于history被放在props中，可以直接通过this.props.history的push和replace改变

可回退：this.props.history.replace(`/home/message/detail`)

不可回退：this.props.history.push(`/home/message/detail`)

同样还有原生的go forward back函数

借助this.prosp.history对象上的API对操作路由跳转、前进、后退

-this.prosp.history.push()

-this.prosp.history.replace()

-this.prosp.history.goBack()

-this.prosp.history.goForward()

-this.prosp.history.go()

withRouter

这些方法只有路由组件有，因为只有路由组件才有下面的属性：

那如果我希望在非路由组件有props中的history属性怎么办呢？

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API

withRouter的返回值是一个新组件

携带参数

如果是想携带参数，有三种方式：

①params（下图绿色）

②search（下图棕色）

③state（下图橙色）

应用：

有了这种方式，我们就可以在进入某个组件的时候让他默认跳转一个页面：

可以写在生命周期函数componentDidMount中

参考链接：

尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩_bilibili

编程式路由导航和withRouter相关推荐

【React路由】编程式路由导航和withRouter的使用——push / replace
文章目录
Day31_编程式路由导航
提出需求 1.观察this.$router 上有什么 (push replace) 2.实现this$router.push查看 1>在message组件里面: 3.实现this$rou ...
Vue 编程式路由导航
文章目录 router- link的replace属性编程式路由导航缓存路由组件两个新的生命钩子 router- link的replace属性 1.作用:控制路由跳转时操作浏览器历史记录的模式 ...
Vue -- 编程式路由导航
文章目录 1. 声明式导航 & 编程式导航 1.1 声明式导航 1.2 编程式导航 2. vue-router 中的编程式导航 API 2.1 常用的编程式导航 API 2.2 \$route ...
Vue声明式路由导航和编程式路由导航的优缺点及实现方法
文章目录前言路由实现 1.目标 2.前置条件 <1>安装vue-router插件 <2>写个用于转跳的组件页 <3>写路由文件 <4>写路由锚点 3 ...
编程式路由导航连续跳转出现NavigationDuplicated报错的问题
1.错误示例如在多次点击搜索按钮进行编程式路由跳转时控制台会出现报错NavigationDuplicated 2.分析错误产生原因原因是在vue-router3.1.0之后, 引入了promise ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
vue-router详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...

编程式路由导航和withRouter

编程式路由导航

withRouter

携带参数

应用：

编程式路由导航和withRouter相关推荐

最新文章

热门文章