react中this.props 里面location丢失的问题

最新推荐文章于 2022-12-26 22:18:02 发布

原创最新推荐文章于 2022-12-26 22:18:02 发布 · 1.3w 阅读

2 ·

CC 4.0 BY-SA版权

本文探讨了在前端开发中遇到的路由跳转问题，包括无法正确传递props以及通过特定方法解决问题的过程。文中提到了两种解决方案：一是重新传递this.props.local.history.push('/city')进行页面跳转；二是使用withRouter来获取路由信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：在上及传下来的的时候根本就没有传过来--本来不该传就有的，但是没有，只能再传一次，确实能传下来

this.props.local.history.push('/city') 可以跳转，原本是没有loacl的，直接props的；

第二种解决方法：在找不到props里面的地址的时候，使用withRouter 可以找到了

2：很奇怪的是，在这个时候刷新是没问题的，应该是往后台转接口的时候出的问题；转到9093应该就出问题了

3：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

邱家少爷

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

withRouter解决react组件history、location、match丢失的问题

读心悦

05-13

3467

withRouter的作用：将react-router的 history、location、match 三个对象传入props对象上默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push(’/detail’)跳转到对应路由的页面然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props

React Navigation 5.x详解

xiangzhihong8的专栏

12-01

1053

React Navigation简介在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在RN应用开发过程中，早期的路由可以直接使用官方提供的Navigator组件，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中，并且Navigator组件也不再被官方推荐使用。此时，我们可以选择由React Native社区开源的一款路由导航库React Navigati

参与评论您还未登录，请先登录后发表或查看评论

【react+ts】react项目中this.props找不到location方法

我的开源项目:https://gitee.com/derekgo/vue-cms_xg

01-26

2190

问题描述我想想在react+ts项目中获取本地信息，所以就是用了this.props.location.pathname但是报错说找不到location，我特喵的就很纳闷解决流程 1.先使用react-router-dom中的withRouter函数包住当前类组件 import {withRouter} from "react-router-dom"; class ReservationList extends Component<InitProps, InitState>{ render

this.props.location.state刷新为undefined

zm_miner的博客

04-01

6179

a页面跳转到b页面, 通过state传参 a页面 this.props.history.push({ pathname: `/chunan-my-declare-detail`, state: { record, takenCount: record.takenCount, takenTicketTime: record.t...

[react] this.props 为空集合 {}

qq_29850249的博客

05-23

2599

第一种解决方法给子组件传 tihs.props import React from 'react' import { Redirect, Route, Switch } from 'react-router-dom' export default class Admin extends React.Component { render(){ return( <Switch> {/* 传值 */} <Route path='/' {..

如何理解react-router官网写的“history is mutable”？this.props.location与this.props.history.location有什么区别？

zrq1210的博客

10-20

2040

我当前的地址是 http://localhost:8002/myproject#/myurl 当我执行跳转： this.props.history.push({ pathname: '/myurl', search:'id=1', state: { fromSource: 1 }, }); 该路由对应的组件是这样的： class MyUrl extends React.Component { componentWillReceiveProps(nextProps) {

【React】react-router-dom 进行路由跳转组件不显示问题

不忘初心，坚定道路！

06-05

1万+

场景使用孙路由跳转父路由时，无论用Link to 还是this.props.history.push跳转，Url地址栏都变了，但是页面组件加载不出来，页面未刷新。点击父路由上的Link to ，同样跳转位置，URL不变，页面未刷新，但是组件加载了。在跳转处以及目标路由处查看this.props发现，跳转后this.props.history已经变成跳转后路由，但是this.props.loc...

React路由

每天都要努力学习哦~~

04-13

1270

目录 SPA的理解路由的理解路由分类后端路由：前端路由：前端路由原理 react-router-dom 路由的基本使用路由组件与一般组件 NavLink与封装NavLink Switch的使用解决多级路径刷新页面样式丢失的问题路由的严格匹配与模糊匹配 Redirect的使用嵌套路由路由传参扫盲ajax请求时携带参数的方式 params参数 search参数 .state参数 push与replace模式编程式路由导航 with...

【React路由】编程式路由导航和withRouter的使用——push replace

m0_67391401的博客

07-28

235

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

React路由3.x教程：基础知识与实践入门

在`User`组件中，可以通过`this.props.match.params.id`来获取传递过来的参数。 ### React路由的高级用法 #### 1. 嵌套路由在React Router中，路由可以嵌套使用。这意味着，一个路由可以包含一个子路由，这样的...

React 路由传参的方式总结

bug收集

10-30

1235

1. 直接在to属性的值后面加?跟上参数通过this.props.location.search 可以得到?及之后的字符串，在自己进行分析 <p><Link to="/productDetail?id=5">商品id:{item.goods_id}</Link></p> 接收: this.props.location.search //输出为 ?id=5 属性string类型 2. 使用query或para...

React 学习笔记总结(五)

探索技术与实践的旅程，分享编程经验与工具使用心得，助力开发者提升技能。

12-26

961

1. React 嵌套路由(多级路由) 2. params参数与 query参数 3. React路由组件传递params参数数据 4. React路由组件传递search参数 5. React路由组件传递search参数 6. React路由组件特殊情况: 刷新页面 7. React路由的 push 和 replace 8. React的编程式路由 9. React路由 withRouter 10. BrowserRouter 与 HashRouter的区别 11. 开源的React UI组

react 路由详细讲解(1)

s_y_f_的博客

07-30

867

介绍: 今天学习了react的重点知识路由,这个知识点是react中的一大块,大家有兴趣的话可以跟随作者的文章继续学习呦 SPA的理解单页Web应用（single page web application，SPA）。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。路由的理解 ① 什么是路由? 一个路由就是一个映射关系(key:value) key为路径, value可能是function或component ② 路

react 向路由组件传递参数的三种方式

rh1289583756的博客

09-21

881

react 向路由组件传递参数的三种方式，手把手教你学会路由组件传值

React初级教学

LoveZJC96的博客

03-28

1467

1.什么是React React 是一个用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。所以React是用组件搭建页面 2.JSX 语法 JSX 它是一种JavaScript语法扩展，可以将HTML 语言直接写在 JavaScript 语言之中，不加任何引号。单标签使用/>来闭合标签如： const element = <h1>Hello, world!</h..

前端路由（七）-编程式导航——通过js方法实现路由跳转 & 获取编程式导航传递的参数-props.location.state & 如果组件不是路由组件-必须使用withRouter包裹原始的组件

weixin_44867717的博客

02-15

649

编程式导航——通过js方法实现路由跳转 & 获取编程式导航传递的参数-props.location.state & 如果组件不是路由组件-必须使用withRouter包裹原始的组件通过js动态控制路由跳转导入withRouter import { withRouter } from "react-router-dom"; 导出时使用withRouter包裹组件 export default withRouter(Login); 被包裹的组件中可以通过props获取his

react路由传参

jiangxiao_bai的博客

02-24

165

react路由传递参数有三种形式。 1.通过query进行接收 <Route path={"/one"} component={one}></Route> <NavLink className={"App-link"} activeClassName={"App-active"} to={{pathname:"/one",query:{a:1,b:{c:3}}}}&...

清除props.location.state

weixin_45481456的博客

02-17

990

/**方法一：清除props.location.state*/ window.history.replaceState({}, document.title); /**方法二：清除props.location.state */ props.history.replace({ ...props.location, state: undefined, });

react小提示：this.props.location.query.bar 获取URL的查询字符串