React 网页跳转总是在之前页面的同一位置

最新推荐文章于 2024-09-14 10:10:11 发布
最新推荐文章于 2024-09-14 10:10:11 发布
阅读量856 收藏
点赞数 1
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59982373/article/details/126948707
版权

       在react项目中使用react-router，使用路由进行页面的跳转，跳转后的页面总是在之前页面的同一位置不返回顶部，这是因为两个页面共享了同一个history，导致浏览的位置也被记录下来了。

 解决方法：

类组件中直接使用：

函数组件中使用：

 

 

 

肆意肆肆
关注
ReactJS 页面跳转保存当前scrollTop回来时，自动移动到上次浏览器的位置
xiaotuni的专栏,每天进步一点点
08-04 6897
在移动端的操作的时候，相信大家都遇到到这种情况，翻了好几页了，点击一项进去查，然后回来的时候，还想回来我原来的位置。google上也找了一此，有一个组件，但是好像是如果想实现这个功能，页面就得用那个组件包进来。一个项目已经写了几十个页面了，每个页面都去把他包进去，然后再实现组件里的方法，太痛苦了。后来发现router里有onEnter onLeave事件，那就在这里做文章吧。这就方便多了，就在rou
【解决】关于Taro（React）开发小程序在同一页面多次引用同一个公共组件state被最后一次引用顶替的问题
llw6868的博客
12-26 2530
我猜此刻你翻到这篇文章应该是一种快抓狂的心态 为什么？因为我刚抓狂完T T 问题：在同一页面多次引用同一个公共组件子组件内部最终的state总是为最后一次引用的state 目的：在同一页面多次复用同一个组件，通过props区分，让子组件内部的state独立（这听起来正常得不能在正常了 可是…） 可是到了Taro（配合的是Taro-ui）一切都没我之前写React Web那么正常- -！ // 查询模块Render searchRender = () =>{ const { current
react跳转路由后位置在上个页面浏览的位置
sunshine的博客
02-21 3248
react跳转路由后，展示的位置是上个页面浏览的位置。解决的思路是强制回到顶部 //在父页面里加入该行代码即可 componentWillUpdate(){ document.getElementById('root').scrollIntoView(true);//为ture返回顶部，false为底部 } 如果使用的是单独的页面，则需要在单独的所有页面里加入如下代码： //...
react跳转到下个页面保存当前页面状态
无名之辈-_-
09-14 187
从A页面跳转到B页面，从B页面返回A页面保留A页面的填写的内容。
React项目，从详情页返回列表页时，保存数据并返回到原来的位置
FengZi_00的博客
09-07 2610
移动端开发时会遇到在列表页点击进入详情，返回后列表页刷新的情况，对用户体验很不友好。 解决方案：使用 react-keeper 完成路由的分配，以及页面组件的缓存 react-keeper 详情参考：https://blog.csdn.net/qq_37942845/article/details/104694966 1、下载相关依赖项 npm install react-keeper -s 2、app.js中相关配置 原来我们app.js中设置路由 import { .
react 回退到前一页面对应位置
wujun123456wujun的博客
06-25 3290
由于react的在跳转页面的时候，实际做了unmount的动作，清楚了前一页面的内容，返回的时候实际上是需要重新渲染的，相应的跳转位置就会丢失。我再做项目开发的过程中也遇到了相同的问题，我把我解决的过程分享给大家，希望能够帮到你。 解决问题的技术背景 1.我们的app是使用了上啦加载下啦刷新的插件（自己封装的），采用的是固定的高度（屏幕高度），自定义滚动轴（非浏览器滚动轴），这个插件会实...
react 跳转到页面指定位置
热门推荐
qq_29755359的博客
05-06 1万+
当我在对getmdl这个网站中的其中一个template进行react化的时候，遇到了<a>标签href=“#xxx”的时候，会进行单页前端路由跳转的问题。点击上图中的红色按钮，正常的需求是，跳转到<a name="screens"></a>这个a标签的位置。<div className="android-be-together-section mdl-t...
React Router如何在url参数不同的情况下跳转页面不更新解决方案
01-20
当用户通过不同的产品ID导航到同一页面时，URL参数`productId`会改变，但React Router不会因为路径相同而重新渲染组件，从而导致页面内容无法更新。这是因为React Router默认仅在路由路径变化时才触发组件的重新渲染...
React Router在url参数不同的情况下跳转页面不更新解决方案
weixin_44272418的博客
04-09 2247
React Router如何在url参数不同的情况下跳转页面不更新解决方案说明解决方案及思路componentWillReceiveProps（nextProps） 说明 场景如下： <Link to={{ pathname: "/product/intro", state: { id: item.productCode, type:...
vscode数据可视化怎么实现在同一页面实现跳转
最新发布
09-23
如果你想在网页上实现在同一页面内的数据跳转，可以利用React、Vue或其他前端框架，以及它们提供的路由管理工具。 例如，在React中，可以使用`react-router-dom`库来实现页面之间的导航。首先安装这个库： ```bash...
react navigation跳转方面的知识点
慕天远的博客
08-27 243
导航的本质 和web界面不同，web界面直接通过url确定界面，通过<a>标签实现界面之间的切换。即使在SPA时代，也是通过比较轻松的router组件实现界面切换。但是native里面，特别是react-native开发里面，界面切换需要native层面手动实现，因此，一定需要有人站出来，把界面切换抽象为普适性的一种规则。react-navigation的基本思想，就是一个react...
react 单页面跳转 页面位置 前进页面滚动到顶部 返回页面滚动到上次浏览的位置
qq_41769728的博客
08-16 2888
react 单页面跳转 页面位置 前进页面滚动到顶部 返回页面滚动到上次浏览的位置 添加以下代码 完美解决 var offsetTop = 0; var canPoP = true; //push可能会触发pop在这节流 hashHistory.listen(location => { if (canPoP) { canPoP = false; if (locat...
vue-cli创建项目及父子模块
逆天的博客
09-29 2997
目录1.创建项目1.1 以管理身份打开cmd，进入项目将要放置的路径1.2 创建 vue init webpack 项目名称1.3 将项目在WebStorm中打开并启动2 入门2.1 父子页面2.1.1 APP.vue与HelloWorld关联2.1.2 APP.vue与hello2关联，在index.js中设置2.1.2 APP.vue与index关联3.vue-rouyer配置子路由3.1 导航3.2 将hi1和hi2加入到hi模板中,单页面中的2个子页面 1.创建项目 1.1 以管理身份打开cmd，进
React中查看更多返回上一页到之前离开当前页面的位置
可乐的博客
08-21 617
React返回上一页的问题
react项目中使用react-keeper，使得从详情页返回列表页时，保存数据并返回到原来的位置
weixin_38729382的博客
05-14 2476
一、引入react-keeper npm install react-keeper 二、路由配置修改 原来 import { Route, Switch, BrowserRouter as Router } from 'react-router-dom'; <Router basename="m/ershouche"> <Switch> <Route exact path="/" component={Cardlist}></Route&
【已解决】记录react页面跳转是否要回到指定浏览位置解决方案
Program Apes
11-23 2003
基于react的umi项目开发中遇到页面之间跳转，有的页面跳转过来需要回到顶部，有的页面需要滚动到指定的位置，常见一些列表页面跳转详情页面，再跳转回来 找了很多资料用了很多方法，都没实现，后面摸索出这个方法 解决方案记录： 先是回到顶部解决方案: // 在layout组件绑定了节点，监听地址path变化 可以实现跳转后回到顶部 const layoutWrapper = useRef() useEffect(()=>{ layoutWrapper.current.scrollTop =
react中切换导航栏时记录每个页面的页面滚动位置，当切换回之前的页面，页面滚动位置为上次浏览的位置
jsmeng626的博客
04-12 1229
当用户在页面中滚动时，各个页面的滚动位置会记录在本地存储中。当用户切换页面时，应用会读取本地存储中的滚动位置，并滚动到上次滚动到的位置。在使用 react-router-dom 的路由组件中，使用 useHistory 钩子来监听路由切换事件，以便在切换页面时记录当前页面的滚动位置。在导航栏中添加切换页面的链接，并使用 react-scroll 来处理点击链接时滚动到页面相应位置的功能。切换回之前的页面时，使用 useEffect 钩子和本地存储中保存的滚动位置来还原之前滚动到的位置。
react中界面跳转 A界面跳B界面，返回A界面，A界面状态保持不变 localStorage方法...
anmizhan5851的博客
06-04 915
好像所有的单页面应用都会有个问题，就是我A作为一级界面，跳转到二级界面B的时候，在回到A界面，你会发现所有的参数都重新加载了 很多时候假如我们的界面有很多条新闻列表，通过设置参数筛选出了一部分的新闻列表，这个时候我点击新闻标题进入了新闻详情，然后返回 到A界面的时候，发现所有的条件都重置了，这样用户体验很显然是非常不好的。 我还是个小菜鸟所以对于那种大佬们说可以使用redux可以实...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值