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

最新推荐文章于 2024-05-07 15:56:26 发布

卡斯疼

最新推荐文章于 2024-05-07 15:56:26 发布

阅读量3.1k

点赞数 11

分类专栏：黑色是沉淀文章标签： javascript reactjs uml 前端框架

本文链接：https://blog.youkuaiyun.com/wt310287544/article/details/124165199

版权

黑色是沉淀专栏收录该内容

3 篇文章

订阅专栏

本文讲述了在使用Reactumi框架和约定式路由时，从`localhost:8000/#/font`通过逻辑跳转至`localhost:8000/#/home`后，回退操作失效的问题。解决方法是在`font`页面跳转`home`时添加了1秒延迟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：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.
      <h1
        onClick={() => {
          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;