背景: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.
        onClick={() => {
          history.goBack();
        goBack
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;
背景:react umi框架,约定式路由,history.type = hash。场景:空白的浏览器路径输入 -- localhost:8000/#/font 通过font页面里逻辑跳转到http://localhost:8000/#/home localhost:8000/#/home 页面 ,然后在home页面点击history.goBack()的时候,奇奇怪怪的问题 出现了。。 奶奶个腿居然给我退到了空白页面。。我要的是返回font页面呀!20220414103257↓↓↓ font 主页: http : //pro.ant.design 文档: http : //pro.ant.design/docs/getting-started 变更日志: http : //pro.ant.design/docs/changelog 常见 问题 解答: http : //pro.ant.design/docs/faq 中国镜像网站: http : //ant-design-pro.gitee.io 2.0版现已发布! :party_popper: :party_popper: :party_popper: 宣布Ant Design Pro 2.0.0 翻译招聘 :loudspeaker: 我们需要您的帮助: https : //github.com/ant-design/ant-design-pro/issues/120 :gem_stone:
Javascript history .go()和 history .back()的用法与区别 简单的说就是:go(-1):返回上一页,原页面表单中的内容会丢失;back():返回上一页,原页表表单中的内容会保留。 history .go(-1):后退+刷新 history .back():后退 之所以注意到这个区别,是因为不同的浏览器后退行为也是有区别的,而区别就跟javascri
工具,以促进 UMI .CMS网站的开发和调试 有利于 UMI .CMS网站开发和调试的扩展。 - 自动检测并显示经常使用的调试资源的链接,例如.xml,ShowStreamsCalls,uobject://,upage://,udata://等 - 在页面右侧的模 窗口中输出XML,避免在 UMI .CMS中打开大量带有XML数据的选项卡。 - 从 UMI 解析XML,将XML节点的属性(如页面,对象标识符,@link)直接转换为链接以进行升级://,uobject://等元素链接以蓝色和黑体字体突出显示。在showStreamsCalls中,每个呼叫也被转换成一个链接。 - 能够处理相同的XML输出,打开 在新标签中。 - 不是后台进程,因此,直到你点击它的图标才会消耗内存 支持语言:русский
import { defineConfig } from ' umi '; export default defineConfig({ nodeModulesTransform: { type: 'none', routes: [ { path: '/', component: '@/pages/index' }, //
React Umi 是一个开箱即用的企业级前端应用框架,它具有丰富的功能和强大的扩展性。在使用React Umi 开发应用程序时,可以使用动态 路由 来提高应用程序的灵活性和适应性。 动态 路由 是指在应用程序运行时根据需要动态生成 路由 配置。在React Umi 中,可以通过使用 约定 路由 和配置 路由 两种方 生成 路由 配置。 约定 路由 是指根据文件和文件夹的命名规则自动生成 路由 配置,而配置 路由 则是通过手动配置一个 路由 表来生成 路由 配置。 在使用动态 路由 时,可以根据需要传递参数来生成不同的 路由 ,从而在应用程序中实现不同的功能。例如,可以在 路由 中添加查询参数来使页面根据不同的参数呈现不同的数据。另外,还可以结合程序运行时的实际情况来动态生成 路由 ,从而提高应用程序的灵活性和可扩展性。 总之,React Umi 的动态 路由 功能是一个非常强大的工具,在实际开发中可以大大提高应用程序的灵活性和适应性,使开发过程更加高效和便捷。