子组件如何获得父组件的history

最新推荐文章于 2024-07-21 18:43:06 发布
最新推荐文章于 2024-07-21 18:43:06 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bujuan__/article/details/98077801
版权

withRouter将react-router 的 history、location、match 三个对象传入props对象上，
通过withRouter包裹一下子组件 子组件就可以获得react-router 的 history

父组件中需要传入 historys(一个名字)
<GoodFoot historys={this.props.history}> </GoodFoot>

子组件中导入withRouter
import { withRouter } from ‘react-router-dom’

包裹子组件
export default withRouter(子组件名字)
然后就可以使用react-router 的history了
this.props.historys.push(’/路径名称’)

bujuan__
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react组件获取不到this.props.history怎么办？
weixin_46344410的博客
08-31 2161
###将方式一改写成方式二即可 //方式一 <Route path="/"> <Home/> </Route> //方式二 <Route path="/" component={Home}> </Route>
react获取访问过的路由历史记录
lx233
07-11 290
后来请教了下大神，实际上可以在组件销毁方法里去监听，原理和去监听路由一样的，而且这样可以更好的～去维护，不用浪费全局的router资源。那考虑useEffect每次在location.pathname 进行变化的时候，直接进行存取队列。这样每次读去到type的时候，可以再去取消掉，有点类似订阅的机制，总之更好管理。看了下，好像没有很好的解决方案，之前的useHistory现在也用不了了，但是，发现有问题啊啊啊，store的更新是惰性的，chatgpt说，可以给他强制更新，但好像又不太好。
解决react的子组件没有history的问题
weixin_36706903的博客
09-11 1513
//子组件中引入 import {withRouter} from "react-router-dom"; //暴露的时候 Aggrid是自己的组件 export default withRouter(Aggrid) //这样就能拿到this.props.history了
react在非组件环境下获取路由信息(history模式进行跳转)
DDAD9527的博客
11-18 2044
非组件环境下获取路由信息和, 实现一个简单的路由登录拦截
React中非组件环境下拿到路由信息----------History
留着鼻涕敲代码
11-19 802
1.如何拿到路由信息， 通常情况下都是在组件情况下通过useHistory拿到路由信息的 但是有个很严重的问题，useHistory这个方法只能只能在组件环境下才能使用，如果非组件将无法使用 2. Router包 与 HashRouter/BrowerRouter的区别 react-router-dom中是有Router这个包，但是它Router 没有history属性 简单理解就是： Router + HashHistroy = HashRouter Router + BrowerHistroy =
Vue切换组件实现返回后不重置数据,保留历史设置操作
10-15
在Vue.js应用中，我们经常需要在用户切换组件或路由时保持某些数据的状态，以便当用户返回时，之前的操作和设置依然保留。这通常涉及到组件的缓存与生命周期管理。本文将详细介绍如何在Vue中实现这个功能，以及如何...
vue2组件实现懒加载浅析
08-30
Vue2组件实现懒加载是一种优化策略，用于提升单页应用（SPA）的性能。懒加载，也称为延迟加载，指的是仅在需要时才加载资源，这样可以显著减少初始加载时间，提升用户体验。在大型SPA中，如果所有组件一次性加载，...
Delphi实现保存最近打开的文件记录VCL组件源码
08-17
`HistoryList.dcr`是该组件的编译资源文件，包含了组件的图标和其他非代码资源，这些资源在运行时会被加载到应用程序中。`HistoryList.pas`则是组件的源代码文件，通常包含了组件的声明、实现以及相关的事件处理函数...
vue组件数据传递、父子组件数据获取，slot,router路由功能示例
10-17
以上是Vue组件间的数据传递，包括子组件获取父组件数据的方法、父组件获取子组件数据的方法，以及Vue插槽slot的使用和Vue Router路由的基本使用和嵌套路由的配置方法。通过实例化的形式分析了Vue.js组件数据传递和...
JavaScript组件焦点与页内锚点间传值的方法
10-24
6. 超链接行为控制：可以通过JavaScript来控制超链接的行为，例如使用href="javascript:history.go(-1);"使超链接实现后退功能，或者直接控制页面跳转到某个URL。 7. 页面内实时传值与获取：通过定时器函数（例如...
react 自己封装的组件获取不到history信息
zzzaaaqqq123456的博客
12-27 963
1.只有通过路由配置的组件才能通过props获取路由信息 2.如果是自定义的组件，没有通过路由配置，无法props获取路由信息 3.通过高阶组件 withRouter包裹普通组件，普通组件就可以通过props获取路由信息 //引入 import React, { Component } from 'react'; import { NavBar } from 'antd-mobile'; import {withRouter} from 'react-router-dom'; class TNavBar e
子组件获取父组件的方法
cherish_z的博客
11-17 1037
用$emit实现。具体操作如下例 父组件： 子组件： 总结流程：子组件需要在父组件里注册并引用，在父组件中引用的子组件加上@(名称，随便起)=“(方法名)”，就可以在子组件通过this.$emit('(名称，对应父组件中子组件定义的名称)')调用。 ...
【React】如何更好的在组件中使用浏览器的history属性
最新发布
u013675821的博客
07-21 289
在React Router v5示例中，我们创建了一个高阶组件，用于将historylocation和match属性传递给被包装的组件。通过这种方式，可以在任何需要的地方使用history属性来管理浏览器的导航。使用 React Router v6 和钩子，代码更加简洁和现代化。如果可能，建议使用 React Router v6 来管理路由和导航。
React 路由管理 - history
weixin_41154070的博客
04-20 5928
history插件返回了一个对象，主要有这几个方法： push replace listen window.history 中 改变路由的方法 pushState, replaceState, 这两个方法都不会触发路由改变事件popstate, history插件中实现了路由更改时调用 listen(fn) 传入的回调函数 在 location.search, location.hash改变时会触发 popstate 回调函数，回调函数中会调用 listen(fn), 传入的回调函数 ...
react中子组件取不到this.props.history
热门推荐
sanstu的博客
04-25 1万+
之前写react的时候发现被react-redux的connect包裹的子组件取不到this.props.history这个对象，可是我又的确需要这个对象怎么办？解决办法也很简单，首先你需要这个import PropTypes from 'prop-types'然后你的组件.contextTypes = { router: PropTypes.object.isRequired }然后你就可以...
React路由的history对象的插件history的使用介绍
mcYang0929的博客
04-15 9361
在react-router中组件里面的跳转可以用<Link> 但是在组件外面改如何跳转，需要用到react路由的history 1.首先是history的安装： npm install history --save 2.我创建了一个JS文件，方便各个文件引用 history.js import { createBrowserHistory } from 'history...
react 项目学习笔记一（react-router中的history）
相约9.28,幸福那一刻
07-25 1万+
react-router 中的history eact-router 是建立在history之上的 history 一个管理js应用session会话历史的js库。它将不同环境（浏览器，node...）的变量统一成了一个简易的API来管理历史堆栈、导航、确认跳转、以及sessions间的持续状态。 //基本 使用 import { createHistory } from 'hi
vue3根据路由加载子组件
03-27
在Vue3中，可以使用Vue Router来实现根据路由加载子组件。具体步骤如下： 1. 安装Vue Router 使用npm或yarn安装Vue Router ``` npm install vue-router ``` 2. 创建Vue Router实例 在main.js文件中创建Vue Router实例，并将其挂载到Vue实例中。 ``` import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` 3. 创建路由配置 在router.js中创建路由配置，指定每个路由对应的组件。 ``` import { createRouter, createWebHistory } from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' import Contact from './components/Contact.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 4. 在组件中使用路由 在需要加载子组件的父组件中，使用Vue Router提供的router-view组件来显示子组件。 ``` <template> <div> <h1>My App</h1> <router-view></router-view> </div> </template> ``` 5. 导航到其他路由 在需要导航到其他路由的组件中，使用Vue Router提供的router-link组件来生成链接。例如： ``` <template> <div> <h2>About</h2> <p>This is the about page.</p> <router-link to="/">Go back to home page</router-link> </div> </template> ``` 当用户点击“Go back to home page”链接时，将会导航到根路由对应的组件（即Home组件）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值