背景: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
的动态
路由
功能是一个非常强大的工具,在实际开发中可以大大提高应用程序的灵活性和适应性,使开发过程更加高效和便捷。