当我们使用react-router给项目带来便利的同时,也会遇到各种不顺的问题,比如当我们从A页面进入B页面的时候,由于共享了同一个history,导致浏览的位置也被记录下来的,这样A页面滑动到底部了,进入B页面也在底部,也显然不符合我们的浏览习惯。
还好react-router提供相应的事件配置我们正常开发:
方案一 onUpdate:
<Router onUpdate={() => window.scrollTo(0, 0)} history={hashHistory}> <Route path="/" component={ App }> </Router>
方案二:history.listen监控
hashHistory.listen((location) => { setTimeout(() => { if (location.action === 'POP') return; window.scrollTo(0, 0); console.log('Back to top', location); }); }); <Router history={hashHistory}> <Route path="/" component={ App }> </Router>
这样我们就可以每次当router变化的时候控制是否需要滚动到顶部。
相关推荐
React-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router ...
react-router-dom 通过Link传值的坑人表现: Link可以通过state传递参数到下一页, 但如果是新窗口打开就不可以用state传递, 可以通过url传递参数
react-router-dom React路由器的DOM绑定 react-router-native 用于React路由器的React Native绑定 react-router-redux Integration with React Router and Redux react-router-config 静态路由配置助手 About react-...
react-router-tutorial-master
npm install koa-react-router react react-dom react-router --save 注意: react react-dom和react-router都是koa-react-router peerDependencies 。 可以将koa-react-router轻松安装在koa 2应用程序中,如下所...
这是一个react-router搭建的实例,下载后npm install 安装下依赖模块,然后npm run server启动。此外https://blog.csdn.net/qq_40621718/article/details/79979897有详细的搭建步骤也可以留邮箱。
缓存路由 英文|使用缓存为Vue中的keep-alive类的react-router 。如果只想要<KeepAlive> ,请尝试React v15 + React-Router v4 +问题使用Route ,前进或后退时无法缓存组件,这会导致数据丢失和交互原因与解决方案...
Hooks Admin,基于 React18、React-Router V6、React-Hooks、Redux、TypeScript、Vite2、Ant-Design 开源的一套后台管理框架。
react-router
通过RouterStore使MobX状态与react-router保持同步。 路由器的位置状态是可观察到的,因此在MobX组件中对其进行的任何引用都会在位置更改时使组件重新呈现。 非常受启发(并复制自) 。 该分支(主节点)与react-...
主要介绍了React-router4路由监听的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
基于react 16.8+ , react-router 4+开发的react缓存组件,可以用作缓存页面组件,类似vue的keepalive封装vue-router的效果功能。 采用react hooks全新api ,支持缓存路由,手动解除缓存,增加了缓存的状态周期,...
react技术是目前流行UI开发框架,是facebook的开源的开发技术
react-router-dom5.0的路由拦截 守卫 demo 封装好的 可以直接套用,方便研究使用,直接移植,对着修改,安装 redux等就行,免 c币 下载地址 http://download.lllomh.com/cliect/#/product/J615178556091098
最好用的react redux react-router antd脚手架
react-router-transition - 构建用于react-router转场效果,基于react-motion实现
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的...基于react+react-router+redux+AntD+Echarts+es6+webpack的共享单车后台管理系统源码+项目说明.zip
├─1116_PM_React-basic-router-1.mp4 ├─1116_PM_React-basic-router-2.mp4 ├─1117_AM_React-basic-immutable-1.mp4 ├─1117_AM_React-basic-动画.mp4 ├─1117_PM_React-basic-immutable-2.mp4 ├─1117_PM_...
#express-react-router-views 它是什么? 快速js的React渲染引擎 使用react-router渲染后端和前端视图 安装 npm install express-react-router-views react react-dom react-router history express --save ...