资讯专栏INFORMATION COLUMN

关于React-Router4.0跳转不置顶解决方案

DC_er / 2676人阅读

摘要:在使用时会遇到奇怪的问题,比如当我们从首页进入详情页的时候,首页跳转到详情页,首页滚动的位置,进入到详情页的时候也会被记录下来,原因是由于共享了同一个,所以对记录有所保留,这显然不符合我们的浏览习惯。总结种解决方案方案一方案二

在使用react-router时会遇到奇怪的问题,比如当我们从首页进入详情页的时候,首页跳转到详情页,首页滚动的位置,进入到详情页的时候也会被记录下来,原因是由于共享了同一个history,所以对记录有所保留,这显然不符合我们的浏览习惯。

总结种解决方案:

方案一

window.scrollTo(0, 0)} history={hashHistory}>

  

方案二

class Protol extends React.Component {

constructor(props) {
    super(props);
}
 componentDidUpdate(prevProps) {
     if (this.props.location !== prevProps.location) {
         window.scrollTo(0, 0)
     }
 }
render() {
    return (
        
{this.props.children}
); }

}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109383.html

相关文章

  • 从路由原理出发,深入阅读理解react-router 4.0的源码

    摘要:通过前端路由可以实现单页应用本文首先从前端路由的原理出发,详细介绍了前端路由原理的变迁。接着从的源码出发,深入理解是如何实现前端路由的。执行上述的赋值后,页面的发生改变。   react-router等前端路由的原理大致相同,可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时,页面的显示结果可以根据URL的变化而变化,但是页面不会刷新。通过前端路由可以实现...

    Miyang 评论0 收藏0
  • 从路由原理出发,深入阅读理解react-router 4.0的源码

    摘要:通过前端路由可以实现单页应用本文首先从前端路由的原理出发,详细介绍了前端路由原理的变迁。接着从的源码出发,深入理解是如何实现前端路由的。执行上述的赋值后,页面的发生改变。   react-router等前端路由的原理大致相同,可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时,页面的显示结果可以根据URL的变化而变化,但是页面不会刷新。通过前端路由可以实现...

    张红新 评论0 收藏0
  • todo-list 项目问题总结(使用 react 进行开发)

    摘要:项目问题总结这个项目,很简单,前端使用,后端使用进行开发。方便移动端开发。当动画结束后,有一个钩子函数可以使用其他一些功能组件,都是自己尝试去编写的,像日历组件组件组件等。版本的,是没有任何的钩子函数,我就感觉懵逼了。。。 todo-list 项目问题总结 这个 todo-list 项目,很简单,前端使用 react,后端 nodejs 使用 koa2 进行开发。数据库使用 Mysql...

    shengguo 评论0 收藏0
  • 使用react-router4.0实现重定向和404功能

    摘要:原文地址在开发中,重定向和这种需求非常常见,使用可以使用进行重定向最常用的就是用户登录之后自动跳转主页。 原文地址:https://github.com/huruji/blog/issues/2 在开发中,重定向和404这种需求非常常见,使用React-router4.0可以使用Redirect进行重定向最常用的就是用户登录之后自动跳转主页。 import React, { Compo...

    hqman 评论0 收藏0
  • 手挽手带你学React:三档 React-router4.x的使用

    摘要:我们在内部来渲染不同的组件我们这里采用哈希路由的方式,鉴于的渲染机制,我们需要把值绑定进入内部。 手挽手带你学React入门三档,带你学会使用Reacr-router4.x,开始创建属于你的React项目 什么是React-router React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。通俗一...

    SunZhaopeng 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<