umi 约定式路由关于 history.goBack() 的奇奇怪怪问题

背景：react umi框架，约定式路由，history.type = hash。

场景：空白的浏览器路径输入 -- localhost:8000/#/font 通过font页面里逻辑跳转到http://localhost:8000/#/home localhost:8000/#/home 页面，然后在home页面点击history.goBack()的时候，奇奇怪怪的问题出现了。。奶奶个腿居然给我退到了空白页面。。我要的是返回font页面呀！

20220414103257

↓↓↓ font页面 ↓↓↓

import React from 'react';
import { history } from 'umi';
import styles from './FontPage.less';const FontPage = () => {const onClick = () => {history.push('/home');};onClick();return <div className={`${styles.root}`}>This is FontPage.</div>;
};export default FontPage;

↓↓↓ home页面 ↓↓↓

import React from 'react';
import styles from './HomePage.less';
import { history } from 'umi';const HomePage = () => {return (<div className={`${styles.root}`}>This is HomePage.<h1onClick={() => {history.goBack();}}>goBack</h1></div>);
};export default HomePage;

最终解决：

font页面跳转到home页面加个延时器。

完美解决，但是我不李姐。。

↓↓↓ font页面 ↓↓↓

import React from 'react';
import { history } from 'umi';
import styles from './FontPage.less';const FontPage = () => {const onClick = () => {setTimeout(() => {history.push('/home');}, 1000);};onClick();return <div className={`${styles.root}`}>This is FontPage.</div>;
};export default FontPage;

umi 约定式路由关于 history.goBack() 的奇奇怪怪问题相关推荐

umi(3.0.5)版本之二约定式路由
看一下umi的官网,你会发现约定路由的规则改了. 动态路由约定 [] 包裹的文件或文件夹为动态路由. 比如: src/pages/users/[id].tsx 会成为 /users/:id src/ ...
umijs介绍及基本用法、配置式路由、约定式路由、路由传参等
umiJS Umi 是蚂蚁金服的底层前端框架中文可发音为乌米,是可扩展的企业级前端应用框架.Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备.同时有强大的插件扩展各种功能. ...
前端路由(一) 路由,hash,history
从vue-router回溯相关原理和知识点前端路由(二)hash实现路由示例什么是路由路由是URL解析对应的函数的映射从用户的角度看: 记录当前页面状态,例如保存当前页的url再次打开url时 ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
git commit 约定式提交
引言在开发中免不了和他人一起团队协作提交代码,为了防止大家每次提交代码时,git commit -m ' '的提交信息不明所以,所以Angular 团队提出了 Git 约定式提交.这只是一种约定规范 ...
前端路由之hash路由与history路由 Orz
什么是路由路由这个概念最先是后端出现的.在以前用模板引擎开发页面时,经常会看到这样 http://hometown.xxx.edu.cn/bbs/forum.php 有时还会有带.asp或.html ...
前端路由: hash history 模式
一. history 模式 history原理: 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate pushSta ...
umi+dva+antd项目搭建
umi+dva+antd 项目搭建说明设计特点创建应用目录注意特点约定式路由嵌套路由 Scroll to top 页面间跳转配置config/config.js(或.umirc.js) ...
react--随笔3
扩展 Immutable.js typescript 搭建环境 create-react-app 目录 --template typescript 统一变化所有用到jsx语法的文件都需要以tsx后缀 ...

umi 约定式路由关于 history.goBack() 的奇奇怪怪问题

背景：react umi框架，约定式路由，history.type = hash。

umi 约定式路由关于 history.goBack() 的奇奇怪怪问题相关推荐

最新文章

热门文章

umi 约定式路由 关于 history.goBack() 的奇奇怪怪问题

背景：react umi框架，约定式路由，history.type = hash。

umi 约定式路由 关于 history.goBack() 的奇奇怪怪问题相关推荐

最新文章

热门文章

umi 约定式路由关于 history.goBack() 的奇奇怪怪问题

umi 约定式路由关于 history.goBack() 的奇奇怪怪问题相关推荐