react hooks 跳转同个路由地址，没有重新执行初始化函数的问题

最新推荐文章于 2025-10-04 21:25:04 发布
原创 最新推荐文章于 2025-10-04 21:25:04 发布 · 779 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react

本文记录了作者在React项目中遇到组件不刷新的问题，分享了两种解决方案：1) 使用中转页面实现页面状态重置；2) 在useEffect中利用window.location.href强制刷新，虽然会产生警告但能临时解决问题。这两种方法并非通用，仅供参考。

前言：
多数情况下大家都会采用componentWillReceiveProps(nextProps){}这个函数去解决路由跳转不刷新页面的问题，但是我自己的项目中并不适用，对于自己遇到的问题也只是做个记录，并非针对普遍情况，仅供参考！

方法一

使用一个中转页面，a?p=1----- b ----- a?p=1，这样就可以再执行初始化的一些列行为了

方法二

使用useEffect在依赖项里强制加了window.location.href就达到刷新的效果了，虽然控制台会报不是有效依赖项，但暂时先这样解决着，后续找到原因再补充~

vue跳转相同路由强制刷新该相同路由组件
hhb442的博客
03-15 4333
而vue自身如果路由不变的情况下是不会这样做的，就是说跳转的路由和当前的路由相同，vue不会进行任何操作，平时开发的时候可能遇到这种需求，在打开该菜单页面的情况下，再次点击菜单需要刷新该组件（销毁再创建）。如果想销毁原路由组件并重新加载一个相同的路由，需要进行以下操作。这样跳转相同路由就能强制刷新组件了，因为key值不同。
React Hooks
putengzhe0231的博客
09-19 686
React Hooks 是 React 16.8 引入的特性，允许在函数组件中使用状态和其他 React 特性。以下是常见 Hooks 的详细用法、注意事项及易混淆点分析。
react路由问题
m0_63201802的博客
11-30 622
rror: A <Route> is only ever to be used as the child of <Routes> element, never rendereddirectly.Please wrap your <Route> in a <Routes>. 原因： React路由版本问题，你可以查看自己的package.json文件，查看react-router-dom的版本，应该是 6 版本。 在React-Router v6版本.
react报错： 切换路由时，上一个组件已卸载，但是它的异步更新状态还没有执行完，所以报错
前端探索
05-15 1507
报错： Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. Goole 翻译： 无法在已卸载的组件上执行React状态
react 怎么让页面强制刷新
dqzd12345的博客
10-31 3634
window.location.reload() // 强制页面刷新
react-router-dom
weixin_30496431的博客
09-23 573
进入项目目录，使用npm安装react-router-dom npm install react-router-dom --save-dev 然后我们新建俩个页面，分别命名为“home”和“detail”。在页面中编写如下代码: // home.js import React from 'react'; export default class Home ex...
React18学习笔记(五) 【总结】常用的React Hooks函数,常用React-Redux Hooks函数,常用React Router DOM Hooks函数和React中的组件通信
最新发布
GAARA
10-04 784
本文总结了React和React-Redux中常用的Hooks函数。React部分包括：1) useState用于状态管理；2) useEffect处理副作用；3) useRef引用DOM或可变值；4) useMemo记忆化计算结果；5) useContext访问上下文；6) useCallback记忆化函数；7) 自定义Hooks。React-Redux部分包括：1) useSelector访问Redux Store状态；2) useDispatch分发Action。每个Hook都介绍了其作用、特点、使用
基于React Hooks与React Native的ToDo应用开发
例如，可以通过 `const [todos, setTodos] = useState([])` 初始化一个空的任务数组，并在用户添加、删除或标记完成任务时调用 `setTodos` 更新状态。由于 React 的响应式机制，UI 会自动重新渲染以反映最新的数据...
React Hooks 教程与项目实战入门
它涵盖了从项目初始化、开发调试、测试验证、构建部署到工程化配置的完整生命周期，融合了 React 核心理念、函数式编程思想、Hooks 设计模式、TypeScript 类型安全、Webpack 构建原理以及 SPA 架构实践等多项关键...
React Hooks实战指南：标准用例与项目结构解析
综上所述，“ReactHooksPlay”不仅仅是一个简单的 Demo 项目，而是系统性地汇集了 React Hooks 在函数组件、状态管理、副作用控制、性能优化、逻辑抽象、路由集成等多个维度的最佳实践。通过对该项目的学习与实践，...
react 路由跳转 路由相同参数不同 页面没有刷新
weixin_44643019的博客
02-28 1016
componentWillReceiveProps(nextProps) { const id = nextProps.location.state.id this.setState( { id, } ) }
react-router 多路由共用同个组件，切换不刷新
热门推荐
MingleHDU的博客
06-20 1万+
先描述下需求吧。 从服务端获取菜单栏要展示的菜单项（如校园公告，乐课网，课程消息，乐答消息，作业消息，...，待办通知），其中校园公告，乐课网和代办通知是一定会有的菜单项（下文称为“常驻嘉宾”），而消息类（如课程消息，乐答消息，作业消息，...）根据运营后台的配置不同而不同（下文称为“本期特邀嘉宾”）。 接口返回数据： 实现思路： 根据type区分不同菜单类型，故可以用type来区...
react-navigation的多次点击重复跳转同一页面、不在堆栈路由页面使用navigation方法的解决思路、withNavigation的使用...
weixin_30335353的博客
04-15 628
一、react-navigation的初使用 createStackNavigator ==> createSwitchNavigator ==> createAppContainer createBottomTabNavigator ==> 自定义的底部Tab NavigationActions 和 StackActions 可以获取navigatio...
antd + react model自定义footer_React 开发要知道的 34 个技巧
weixin_39967670的博客
10-21 853
作者：火狼来源：https://juejin.im/post/68449039932782018701 组件通讯1.1 props子组件"react";父组件'props传入的name值'}eightteenChildOneToFather={(mode)=>this.eightteenChildOneToFather(mode)}>//或者'props传入的n...
React native回退上一页面后刷新页面
Scluis的博客
10-14 3559
最近开始做react native的项目，遇到了一个小问题，记录一下。 问题大概是这样的，我在一个页面显示数据，称之为A，一个页面插入数据，称之为B。在B插入完数据后跳转到A，无法显示刚插入的数据，必须手动刷新一下，才可以显示。 查了一下，这是由于react native运行时，只有在props和state的值改变的时候，才会重新渲染页面，而它创建时的钩子函数componentDidMount只会创建时执行一次，不像Vue每次打开这个页面都会执行，所以也没法在这里请求数据，于是我就想，react nativ
react中组件外部的代码只会在项目加载时执行一次、在切换路由时，并不会重新执行
imkaifan的博客
11-26 1099
bug现象： 当我切换到北京之后，房屋列表数据并没有更新。而且页面的当前位置现实的还是上海，只有重新刷新页面之后才有效 相关代码： 原因： 在react中组件外部的代码只会在项目加载时（刷新页面）执行一次。在切换路由时，并不会重新执行 解决：利用生命周期来解决 ...
react useNavigate 路由跳转组件之间传参
xhwy_zh的博客
10-13 1927
在React中使用`useNavigate`进行路由跳转，并传递参数给目标组件，目标组件可以使用`useParams`来接收参数
React 路由切换时同一组件无法重新渲染的解决方案
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
08-10 2196
React 路由切换时同一组件无法重新渲染的解决方案
React 项目初始化步骤
M_wolf的博客
10-13 3009
npm install -g create-react-app create-react-app my-app cd my-app yarn start
React应用项目初始化与基础结构搭建
本项目“react-app48466552298929236”是一个基于React框架构建的前端应用程序，从其标签信息“React, 前端开发, JavaScript, 项目初始化, 组件化, npm, webpack, ES6, 单页应用, 开发环境”可以看出，该项目涵盖了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值