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

DC_er 发布于2019-08-26 13:43 / 2765人阅读

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

在使用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}
            
        
    );
}

}

云服务器 GPU云服务器 asp中跳转不正常解决首页跳转 react-router react-router4

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

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

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

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

Miyang 2019-08-23 12:01 评论0 收藏0
todo-list 项目问题总结（使用 react 进行开发）

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

shengguo 2019-08-22 15:37 评论0 收藏0
使用react-router4.0实现重定向和404功能

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

hqman 2019-08-20 18:57 评论0 收藏0
手挽手带你学React：三档 React-router4.x的使用

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

SunZhaopeng 2019-08-23 15:11 评论0 收藏0