详解关于React-Router4.0跳转不置顶解决方案
在使用react-router时会遇到奇怪的问题,比如当我们从首页进入详情页的时候,首页跳转到详情页,首页滚动的位置,进入到详情页的时候也会被记录下来,原因是由于共享了同一个history,所以对记录有所保留,这显然不符合我们的浏览习惯。
总结种解决方案:
方案一
<Router onUpdate={() => window.scrollTo(0, 0)} history={hashHistory}> <Route path="/" component={ App }> </Router>
方案二
class Protol extends React.Component { constructor(props) { super(props); } componentDidUpdate(prevProps) { if (this.props.location !== prevProps.location) { window.scrollTo(0, 0) } } render() { return ( <div> <Header/> {this.props.children} <Footer/> </div> ); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
react-router JS 控制路由跳转实例
Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.handleSubmit}> <input type="text" placeholder="userName"/> <input type="text" placeholder="repo"/> <
-
react-router实现跳转传值的方法示例
前言 本文主要给大家介绍了关于react-router跳转传值的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: react-router跳转传值 1.引入包 import {hashHistory} from 'React-router' 2.跳转传值 handleClick = (value) => { hashHistory.push({ pathname: 'message/detailMessage', query: { title:value.title, time:va
-
react-router v4如何使用history控制路由跳转详解
前言 距离React Router v4 正式发布也已经挺久了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好"尝尝鲜"... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(。ꏿ﹏ꏿ)ノ゙咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事实上 3.x 版本相比于 2.x 并没有引入任何新的特性,只是将 2.x 版本中部分废弃 API 的
-
详解关于React-Router4.0跳转不置顶解决方案
在使用react-router时会遇到奇怪的问题,比如当我们从首页进入详情页的时候,首页跳转到详情页,首页滚动的位置,进入到详情页的时候也会被记录下来,原因是由于共享了同一个history,所以对记录有所保留,这显然不符合我们的浏览习惯. 总结种解决方案: 方案一 <Router onUpdate={() => window.scrollTo(0, 0)} history={hashHistory}> <Route path="/" component={ Ap
-
详解对于React结合Antd的Form组件实现登录功能
一.React 结合 Antd 实现登录功能 引入所需的 Antd 组件,代码如下所示: import { Form, Icon, Input, Button, message } from 'antd' 在 Login.jsx 中,创建一个 Login 组件.当对外暴露组件时,需要使用 Form 组件进行包装,包装 Form 组件生成一个新的组件 Form(Login),同时新组件会向 Form 组件传递一个强大的对象属性 form,这样就可以取到 Form 表单的值,这也是高阶组件和高阶函数
-
mysql数据库详解(基于ubuntu 14.0.4 LTS 64位)
1.mysql数据库的组成与相关概念 首先明白,mysql是关系型数据库,和非关系型数据库中最大的不同就是表的概念不一样. +整个mysql环境可以理解成一个最大的数据库:A +用mysql创建的数据库B是属于A的,是数据的仓库,相当于系统中的文件夹 +数据表C:是存放数据的具体场所,相当于系统中的文件,一个数据库B中包含若干个数据表C(注意此处的数据库B和A不一样) +记录D:数据表中的一行称为一个记录,因此,我们在创建数据表时,一定要创建一个id列,用于标识"这是第几条记录",id
-
详解.NET Core 3.0 里新的JSON API
为什么需要新的 JSON API ? JSON.NET 大家都用过,老版本的 ASP.NET Core 也依赖于 JSON.NET . 然而这个依赖就会引起一些版本问题:例如 ASP .NET Core某个版本需要使用 JSON .NET v10 ,而另一个库需要使用 JSON.NET v11 :或者 JSON .NET 出现了一个新版本,而ASP .NET Core 还不能支持这个版本,而您却想使用该版本. System.Text.Json 随着 NET Core 3.0 的
-
详解django使用include无法跳转的解决方法
一般的django项目我都喜欢采用以下的文件结构,使用include的方式,实现从总的url分配给apps里面的url Example: -projtect ---apps -----user -------urls.py -urls.py 但突然发现无法跳转,竟然是总url的这个错误! 以下是错误做法 urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^', views.Index.as_view(), name='index'),
-
详解ASP.NET Core3.0 配置的Options模式
上一章讲到了配置的用法及内部处理机制,对于配置,ASP.NET Core还提供了一种Options模式. 一.Options的使用 上一章有个配置的绑定的例子,可以将配置绑定到一个Theme实例中.也就是在使用对应配置的时候,需要进行一次绑定操作.而Options模式提供了更直接的方式,并且可以通过依赖注入的方式提供配置的读取.下文中称每一条Options配置为Option. 1.简单的不为Option命名的方式 依然采用这个例子,在appsettings.json中存在这样的配置: { "Th
-
详解antd+react项目迁移vite的解决方案
antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,因为vite太快了.经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写成本文分享给大家. Vite是什么 作为本文的主角,首先简单介绍一下vite这个构建工具,该工具是尤雨溪推出的[下一代前端开发和构建工具],vite其实也不是一个新的工具,早在一年
-
详解vue-router的Import异步加载模块问题的解决方案
1.问题现象 2.出现问题的代码点 3.替代方案: 把import() 替换成如下: Promise.resolve().then(()=>require(`@/views/${str}`)) 4.原因分析 项目在编译时,出现一个警告 这个警告的含义: require接收了一个变量,会报上面的警告,接收一个写死的字符串值时则没有警告! 我们通过控制台查看到import()对应编译过后的代码: 从上图可以看到require接收了一个变量,所以运行时出现了警告. 那这样就会报上面找不到对应的模块.
-
详解Springboot+React项目跨域访问问题
一.开发环境 框架:springboot 1.5.10.RELEASE 开发工具:IDEA JDK:1.8 前端框架:React 15.6.1 浏览器:Chrome浏览器 二.跨域问题 本地使用ajax访问localhost:8080端口时报错: Failed to load http://localhost:8080/test/test.do: No 'Access-Control-Allow-Origin' header is present on the requested resourc
-
详解使用React进行组件库开发
最近针对日常业务需求使用react封装了一套[组件库], 大概记录下整个开发过程中的心得.由于篇幅原因,在这里只对开发过程中比较纠结的选型和打包等进行讨论,后续再对具体组件的封装进行讨论. 概述 我们都知道,组件化的开发模式对于我们的开发效率有着极大的提升,针对我们日常使用的基本组件进行封装,可以大量的简化我们对于基本UI的关注度,让我们的工作聚焦在业务逻辑上,很好的分离业务与基础UI的代码,使得整个项目更有调理,这也是我们要进行本组件库开发的原因. 然而现有React开源组件有很多,像ant-
随机推荐
- php中static静态变量的使用方法详解
- JavaScript学习点滴 call、apply的区别
- vbs 定时删除功能实现代码
- Ubuntu“无法打开锁文件(Could not get lock)”问题解决方法
- React服务端渲染(总结)
- win7下memCache的安装过程(具体操作步骤)
- C++中this指针的用法及介绍
- mysql常用函数汇总(分享)
- 关于skip_name_resolve参数的总结分享
- 布同 统计英文单词的个数的python代码
- Ajax 说的比较清楚的一篇文章
- 用SQL统计SQLServe表存储空间大小的代码
- jquery 新手学习常见问题解决方法
- 深入理解js中的加载事件
- Javascript学习笔记之数组的遍历和 length 属性
- 针对初学PHP者的疑难问答(1)
- PHP在线调试执行的实现方法(附demo源码)
- 浅谈二叉查找树的集合总结分析
- Android 实现手机接通电话后振动提示的功能
- python实现微信跳一跳辅助工具步骤详解