开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

history.push()不工作-更新url，但不转移

问题描述：history.push()不工作-更新url，但不转移。

回答： history.push()是浏览器提供的一个方法，用于在浏览器的历史记录中添加一个新的记录，并更新当前页面的URL，但不会导致页面的实际跳转。

在前端开发中，使用history.push()可以实现无刷新更新URL的效果，常用于单页面应用（SPA）中的路由跳转。

然而，如果history.push()方法不起作用，可能有以下几个原因：

浏览器不支持HTML5的History API：history.push()方法是HTML5的一部分，如果浏览器不支持HTML5的History API，该方法将无效。可以通过检查浏览器的兼容性来确认是否支持。
路由配置错误：在使用history.push()方法之前，需要确保正确配置了路由。路由配置包括定义路由规则和对应的组件或页面。
错误的调用方式：确保正确调用history.push()方法，并传递正确的参数。通常情况下，需要传递一个新的URL作为参数。
其他代码错误：如果以上步骤都没有问题，那么可能是其他代码引起了问题。可以尝试注释掉其他可能影响history.push()方法的代码，逐步排查错误。

如果需要在腾讯云上部署相关的产品来支持前端开发中的路由跳转，可以考虑使用腾讯云的云服务器（CVM）来搭建前端应用的服务器环境，使用腾讯云的负载均衡（CLB）来实现流量分发，使用腾讯云的对象存储（COS）来存储前端应用的静态资源，使用腾讯云的CDN加速（CDN）来提供全球加速访问，使用腾讯云的域名服务（DNSPod）来管理域名解析。

腾讯云相关产品介绍链接：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
负载均衡（CLB）：https://cloud.tencent.com/product/clb
对象存储（COS）：https://cloud.tencent.com/product/cos
CDN加速（CDN）：https://cloud.tencent.com/product/cdn
域名服务（DNSPod）：https://cloud.tencent.com/product/dnspod

请注意，以上仅为示例，实际选择使用哪些腾讯云产品需要根据具体需求进行评估和决策。

相关搜索:$location.path('/url')不工作 Angular 2 [routerLink]导航但不更新url history.push()不更新浏览器的url history.push()更新url，但不呈现组件 history.push()重定向url，但组件不呈现(reactjs应用程序)history.push更改了URL，但不呈现任何组件 Htaccess不工作-很好的url JDBC更新不显示错误但不工作？Minikube服务URL不工作 moviedb url结束点不工作？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

react-router v6使用createHashHistory进行history.push时，url改变页面不渲染

问题描述在我使用history库的createHashHistory创建history对象时，使用history.push进行页面跳转的时候，url 变化，但是页面没有渲染。...import {createHashHistory } from 'history' const history = createHashHistory({window}) history.push("

4K2 0

hibernate persist update 方法没有正常工作(不保存数据，不更新数据)

在代码实现中使用hibernate persit()方法插入数据到数据库，使用hibernate update()方法更新数据。问题是执行这两个方法没有报错，但是也没有插入数据或者更新数据。...> zhongguo：null =================save2()================== ================update2()====...更新一条记录India-->zhongguo：null =================save3()================== Hibernate: insert into PERSON...更新一条记录India-->zhongguo：id=8, name=Pankaj, country=zhongguo 原因分析一共有三个测试例子，第一个例子test1()方法，调用save1()方法，

2.3K1 0

「源码解析」这一次彻底弄懂react-router路由原理

，并传递当前的location对象，由于这次url变化的，是history.pushState产生的，并不会触发popState方法，所以需要手动setState，触发组件更新。...如果存在多个Router会造成，会造成切换路由，页面不更新的情况。 2 Switch-匹配正确的唯一的路由根据router更新流，来渲染当前组件。...流程分析当地址栏改变url，组件的更新渲染都经历了什么？??? 拿history模式做参考。...当我们调用history.push方法，切换路由，组件的更新渲染又都经历了什么呢？...我们还是拿history模式作为参考，当我们调用history.push方法，首先调用history的push方法，通过history.pushState来改变当前url，接下来触发history下面的

3.9K4 0

React 进阶 - React Router

Route Route 是整个路由核心部分，主要工作：匹配路由，路由匹配，渲染组件路由状态是用 context 传递的，所以 Route 可以通过 RouterContext.Consumer...，适合路由不匹配或权限路由的情况注意 Switch 包裹的 Redirect 要放在最下面，否则会被 Switch 优先渲染 Redirect ，导致路由页面无法展示 # 从路由改变到页面跳转当用户触发...history.push ，或者点击浏览器前进后退，路由改变到页面重新渲染流程。...("/home")，利用 history 对象的 push 方法参数传递 url 拼接 const name = "cell" const age = 18 history.push(`/home?...name=${name}&age=${age}`) 传递的参数，会直接暴露在 url 上 state 路由状态 const name = "cell" const age = 18 history.push

1.8K2 1

React 中的一些 Router 必备知识点

/组件）会更新，即执行 componentDidUpdate 方法，但不会被卸载，也就是说，不会执行 componentDidMount 方法。...~~（其实不想明文可以进行加密处理，但一般情况下敏感信息是不建议放在 URL 中传递的～）场景 2 描述：编辑/详情页，想要共用一个页面，URL 由不同的参数区分，此时我们希望，参数必须为 edit...react-router/issues/4410）针对上一节中场景 1 的 Case C，查询参数隐身式带法时（从 state 里带过去的），在 this.props.location.state 里可以取到（不推荐不推荐不推荐...state 改变，通知 Router 组件更新 location 并通过 context 上下文传递，匹配出符合的 Route 组件，最后由组件取出对应内容，传递给渲染页面，渲染更新...），最后通过 setState 方法通知 Router，触发组件更新。

2.7K2 0

React 中的一些 Router 必备知识点

/组件）会更新，即执行 componentDidUpdate 方法，但不会被卸载，也就是说，不会执行 componentDidMount 方法。...~~（其实不想明文可以进行加密处理，但一般情况下敏感信息是不建议放在 URL 中传递的～）场景 2 描述：编辑/详情页，想要共用一个页面，URL 由不同的参数区分，此时我们希望，参数必须为 edit...react-router/issues/4410）针对上一节中场景 1 的 Case C，查询参数隐身式带法时（从 state 里带过去的），在 this.props.location.state 里可以取到（不推荐不推荐不推荐...state 改变，通知 Router 组件更新 location 并通过 context 上下文传递，匹配出符合的 Route 组件，最后由组件取出对应内容，传递给渲染页面，渲染更新...），最后通过 setState 方法通知 Router，触发组件更新。

2.9K4 0

从Vue-router到html5的pushState

其次，我们也知道一般情况下，url变更的时候，比如指定location.href、history.push、replace等，页面就会刷新。那么问题来了，vue页面的页面跳转时怎么实现的？...，但是不刷新页面，不刷新页面，不刷新页面。...不刷新页面，这点很关键，这和下面的操作很相似 window.location.href = window.location.href + '#a=b' 知道干嘛的了，再看看API怎么用的 history.pushState...说到这，vue-router是怎么实现页面“刷新”但不刷新的就知道了吧。...同时根据router前往的路由获取对应的js资源文件并挂载到目标dom上实现页面内容的更新，但是页面本身并没有刷新。

3.1K5 0

深入揭秘前端路由本质，手写 mini-router

不卖关子，先分别谈谈两种路由用什么样的 api 实现前端路由： hash 通过 location.hash = 'foo' 这样的语法来改变，路径就会由 baidu.com 变更为 baidu.com/...url 在路由中最重要的 url 参数反而是个可选参数，放在了最后一位。...为什么路径更新后，浏览器页面不会重新加载？...我们利用观察者模式封装了一个简单的 listen API，让用户可以监听到 history.push 所产生的路径改变。...RouterContext.Provider> ); }; 注意看注释的部分，我们在组件初始化的时候利用 history.listen 监听了路由的变化，一旦路由发生改变，就会调用 setLocation 去更新

1.4K4 1

浏览器history模式及Umi history的使用

history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。...history 记录中向前或者后退多少步，参数是一个整数，可为正数可为负数； goBack：返回上一页； forward()：前进； replace：替换当前的 history 记录，跳转到指定的 url...history.location.search) console.log(history.location.hash) 2、路由跳转 import { history } from 'umi'; // 跳转到指定路由 history.push...('/list') // 带参数跳转到指定路由 history.push('/list?...a=b') history.push({ pathname: '/list', query: { a: 'b' } }) // 跳转到上一个路由 history.goBack();

8.3K2 1

Redux with Hooks

既然Hooks大法这么好，不赶紧上车试试怎么行呢？于是本人把技术项目的react和react-dom升级到了16.8.6版本，并按官方建议，渐进式地在新组件中尝试Hooks。...('/home'); }); } ... } ... // 不传入mapDispatchToProps export default withRouter(connect...因为很显然，它们俩都消费了同一个state（尽管都只消费了state的一部分），所以当这个全局的state被更新后，所有的Consumer自然也会被更新。但我们不是已经用memo包裹组件了吗？...是的，memo能为我们守住来自props的更新，然而state是在组件内部通过useContext这个hook注入的，这么一来就会绕过最外层的memo。那么有办法可以避免这种强制更新吗？...思路其实跟上面的一样，但不用拆成两个组件： const Header = () => { const { state, dispatch } = useContext(Store);

3.3K6 0

记一次preact迁移到react16.6.7的经历

语法上 preact的元素数组可以不写key，切换回来必然警告很多，需要把key补上 render() { return ( [ 1, ] ); } 复制代码元素的style可以写字符串，转回react是报错，导致页面白屏 <div style={`background: url...直接history上改，只能改地址栏的url显示但不能更新组件以及内部状态。所以我们只能找和react-router配合起来用的相关的库。...const history = createHashHistory(); 复制代码打印了history，发现它有push、replace属性，大概也猜到应该就是像route的效果的，一验证发现可行： history.push...切换回react，发现动画不生效，才发现因为内部渲染机制不一样导致的。所以我们把函数的调用放在didupdate里面，并且加上执行过一次的标记判断。 6.

1.1K4 0

记一次preact迁移到react16.6.7的经历

语法上 preact的元素数组可以不写key，切换回来必然警告很多，需要把key补上render() { return ( [ 2...1, ] ); } 元素的style可以写字符串，转回react是报错，导致页面白屏<div style={`background: url...直接history上改，只能改地址栏的url显示但不能更新组件以及内部状态。所以我们只能找和react-router配合起来用的相关的库。...createHashHistory'; const history = createHashHistory(); 打印了history，发现它有push、replace属性，大概也猜到应该就是像route的效果的，一验证发现可行： history.push...切换回react，发现动画不生效，才发现因为内部渲染机制不一样导致的。所以我们把函数的调用放在didupdate里面，并且加上执行过一次的标记判断。 6.

7452 0

react 路由权限守卫

location") // location当前页面地址栏解析 pathname 地址 query查询 hash哈希值 return ( 您的页面被外星人绑架了找不页面...<Route path={ match.url+"/order"} component={ Order}> { match.url==='/admin...<Redirect from={ match.url} to={ match.url+"/order"} >:""} )...( <button onClick={ ()=>history.goBack()}>返回 | <button onClick={ ()=>history.push...<button onClick={ ()=>history.replace("/")}>首页-repalce <button onClick={ ()=>history.push

1.6K2 0

React Router V6详解

history.push("teams") 2.1.2 Link 除了声明路由饿的方式外，我们还可以使用Link组件来打开一个新页面，Link组件最终会被渲染成a元素，最常见的场景就是打开一个网页页面。...改变路径url时不触发页面刷新当url发生改变时会重新渲染url对应的界面所以，我们谈React Router的原理，其实就是分析订阅和操作history堆栈、URL 与router匹配以及渲染router...Dynamic Segment：动态路径匹配； URL Params：动态段匹配的URL的解析值； Router ：使所有其他组件和hooks工作的有状态的最高层的组件； Route Config：将当前路径进行匹配...转想/contact window.history.pushState({}, undefined, "/contact"); }}/> 以上代码会修改URL，但不会渲染任何UI的变化，如果我们需要修改页面...变化时更新其状态，并重新渲染。

7.8K5 0

react后台管理系统路由方案及react-router原理解析

2、history的方式 H5 提供了一个好用的 history API，使用 window.history.pushState() 使得我们即可以修改 url 也可以不刷新页面，一举两得。...回退 createBrowserHistory: popstate createHashHistory: hashchange React组件为什么会更新其实无论是react-router....能够使组件更新的根本原因，还是最后出发了setState函数；对于react-router，其实是对history原生对象的封装，重新封装了push函数，使得我们在push函数执行的时候，可以触发在Router...组件中组件装载之前，执行了history.listener函数，该函数的主要作用就是给listeners数组添加监听函数，每次执行history.push的时候，都会执行listenrs数组中添加的listener..., 这里的listener就是传入的箭头函数，功能是执行了Router组件的setState函数，Router执行了setState之后，会将当前url地址栏对应的url传递下去，当Route组件匹配到该地址栏的时候

7202 0

前端路由的原理及应用

currentPage-1); document.links[1].textContent = 'retreat to ' + (currentPage-1); } popstate事件页面不刷新已经办到了...history.listen((location, action) => { console.log(action, location.pathname, location.state) })history.push...history.length —— 历史堆栈中的条目数 history.loaction —— 当前位置 history.action —— 当前的导航操作也可以使用 history对象的方法来改变当前的location: history.push...默认情况下，点击时，会调用history.push方法 history.push({ pathname: '/new-place' }) history.replace(path, [state])...可以去这里看看：https://github.com/reactjs/react-router ，也可以阅读下源码，深入理解react-router是如何结合history对象，实现点击'link'跳转页面并更新视图的

2.2K2 0

说说React-Router底层实现？-面试进阶

React-Router基本了解对于React-Router是针对React定义的路由库，用于将URL和component进行匹配。 React-Router源码分析简单前端路由的实现<!...这里提到了，其实就是用于url和组件的匹配。了解Redirect.jsreact-router/Redirect.js//这里省去其他库的引用import generatePath from "....this.props; //Router中拿到需要跳转的路径，然后传递给history const to = this.computeTo(this.props); if (push) { history.push...pathname to a path pattern.如果不匹配，返回null,也就是找不到页面信息 }; render() { const { match } = this.state;...在Redirect中进行路径的计算，调用history.push/history.replace等更新history信息。Route中根据计算的匹配结果，进行页面首次渲染/页面更新渲染处理。

4020 0

React 折腾记 - (2) 实现路由动效过渡,并解决过程中奇奇怪怪的问题

position:relative, 不然会一直往上找相对位置,实在找不到会相对窗口点击侧边栏,组件一直重复渲染的问题一开始想的是去子组件区域,用shouldComponentUpdate来判断URL...然后阻止渲染,发现不可行因为过渡外部用的location.key是随机性的,所以组件每次都会重新渲染最终的解决方案,是改掉了侧边栏的Link组件,直接用事件绑定(history.push来跳转),完美...拿到路由相关的信息 const { history, location } = this.props; // 判断我们传入的静态路由表的路径是否和路由信息匹配 // 不匹配则允许跳转...反之打断函数 if (location.pathname === itemurl) { return; } else { history.push

1.1K1 0

ReactRouter的实现

中，但不会被包括在HTTP请求中，即#及之后的字符不会被发送到服务端进行资源或数据的请求，其是用来指导浏览器动作的，对服务器端没有效果，因此改变Hash不会重新加载页面。...ReactRouter的作用就是通过改变URL，在不重新请求页面的情况下，更新页面视图，从而动态加载与销毁组件，简单的说就是，虽然地址栏的地址改变了，但是并不是一个全新的页面，而是之前的页面某些部分进行了修改...H5提供的pushState()、replaceState()等方法以及popstate等事件，这些方法都是也可以改变路由路径，但不作页面跳转，当然如果在后端不配置好的情况下路由改编后刷新页面会提示404...在Router中的listen，它会监听路由的变化，然后通过context更新props和nextContext让下层的Route去重新匹配，完成需要渲染部分的更新。...history.replace : history.push; method(this.props.to); } } render() { const { innerRef

1.4K1 0

彻底理清前端单页面应用（SPA）的实现原理

对于一个应用而言，url 的改变(不包括 hash 值得改变)只能由下面三种情况引起：点击浏览器的前进或后退按钮点击 a 标签在 JS 代码中触发 history.push(replace)State...针对情况 1，HTML5 规范中有相应的 onpopstate 事件，通过它可以监听到前进或者后退按钮的点击，值得注意的是，调用 history.push(replace)State 并不会触发 onpopstate...另外绑定 popstate 事件，当用户点击前进或者后退的按钮时候，能够及时更新视图，另外当刚进去页面时也要触发一次视图更新。...当然上面还有情况 3，就是你在 JS 直接触发 pushState 函数，那么这时候你必须要调用视图更新函数，否则就是出现视图内容和 url 不一致的情况。...return null; } } 组件挂载监听hash change原生事件，将要卸载时候移除事件监听防止内存泄漏每次hash改变，就触发所有对应hash的回掉，所有的Router都去更新视图

3K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭