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

本文探讨了在React Router中使用this.props.location和this.props.history.location的区别。简单来说,this.props.location更为可靠,而this.props.history.location是可变的,不推荐在生命周期钩子中使用。文章通过实例解释了history.isMutable的概念,指出props.history.location的值可能不符合预期,因此建议直接使用props.location。
摘要由CSDN通过智能技术生成

1. 关于this.props.location与this.props.history.location该用哪个?

- 简单粗暴的结论

简单说就是,
😯 两者的区别就是this.props.location更可靠
👌 so, 最好直接用this.props.location,特别是在react 生命周期钩子函数中(如果在生命周期函数中用this.props.history.location可能得不到你期望的值)

- react-router官网中的描述

react-router官网中在描述history时说: history is mutable

在描述location时又有这样一句话:a location object is never mutated so yu can use it in the lifecycle hooks…

👆 就是官网推荐你直接通过this.props.location来获取location

如果不想知道为什么,this is the end ~ 如果有兴趣了解,就继续往下看吧


2. 用实例来理解history is mutable

现在我有如下配置,
【path: /myurl 】— 对应 — 【 React组件: myUrl

<Route path='/myurl' component={
   MyUrl} />;

该路由对应的组件是这样的:

class MyUrl extends React
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值