Umi-解决配置路由页面不渲染的问题

最新推荐文章于 2025-05-16 14:26:50 发布
最新推荐文章于 2025-05-16 14:26:50 发布
阅读量3.7k 收藏 2
点赞数 3
CC 4.0 BY-SA版权
分类专栏： React Umi 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/silence_xiang/article/details/120673183
本文描述了一位开发者在配置Ant Design布局时遇到的问题，发现路由path缺失导致页面加载失败。通过排查，发现有两个重名location，修正方法是在嵌套路由中添加path属性。

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

文章目录

问题描述

今天遇到了一个见鬼的问题,在配置路由的时候,页面不出来
参考了该文章
想明白了 是可能是自己路由path没有写的问题

路由配置文件

在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/05c40294779e43799bf68cf76fbe959a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAc2lsZW5jZV94aWFuZw==,size_18,color_FFFFFF,t_70,g_se,x_16
在这里插入图片描述
注意 这里的智慧能耗和能耗监控 都是没有path属性的

问题分析

页面渲染 用了antd的layout组件
在这里插入图片描述

点击左树的时候 查看打印渲染的children的值
在这里插入图片描述
然后发现有两个location的key 都是一样的
所以给嵌套的两个子路由加上path就可以了

解决方法

把path加上 不然路由渲染不出来
在这里插入图片描述

react-umi-3-1.动态路由实现并实现路由权限
echo_Ae的博客
12-08 4936
效果图： 这时候让我们先把 pages 下面的 index.ts、index.less 删除掉 这样看起来就整洁了很多 好了开始正文。 其实动态路由非常简单~实用umi框架之后，小伙伴们先来到umi文档运行时配置 来让我们来实现 .umirc.ts import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', },
react-router-dom路由配置
读心悦
05-17 895
react-router-dom 是 React 的官方路由库，用于在 React 应用程序中实现单页面应用（SPA）的路由管理。下面是一个基本的 react-router-dom 路由配置示例：首先，确保你已经安装了 react-router-dom。
VueRouter-在嵌套路由的过程中子路由不显示的问题
weixin_44161147的博客
07-18 5717
VueRouter-在嵌套路由的过程中子路由不显示的问题 代码场景 预期的是下面的展示： 新闻和消息为嵌套的路由，当点击新闻的时候，会展示新闻列表，当点击消息的时候，会出现消息列表 错误场景 但是当我运行的时候，点击新闻按钮，不显示新闻子路由的内容，点击消息按钮，也不显示消息子路由的内容，代码也没有报错 解决方案 1.父组件中没有写“router-view"标签，在父组件中补上即可： 2.在配置子路由router的过程中子路由的path没有加"/" { path: '/h
使用umi中的history跳转页面但不渲染组件的问题
znhyXYG的博客
07-12 4963
使用umi中的history跳转页面但不渲染组件的问题
vue路由跳转时改变路由参数组件不渲染问题【已解决】
Zwwxd666的博客
07-27 800
router路由为了组件复用，防止组件的频繁销毁与创建，在遇到跳转的路由不一致才会进行重新渲染，路径参数变了他是不会管的，只会改变this.$route对象而已。我们可以写一个watch监视this.$route对象。一旦发生变化，则发请求重新渲染。就这个东西/:xxx。
触发dva的dispatch后，组件视图未重新渲染
youlinhuanyan的博客
12-07 3373
触发dva的dispatch后，组件视图未更新 使用dispatch方法后，正确调用model下的reducers的某个方法，但是组件更新React组件中的render()方法未重新渲染 dispatch方法正常调用 state已正确更新 组件中也通过this.porps，正确获取到状态 但是就是不触发更新 export default { namespace:'settingDrawer...
使用路由后页面不渲染
NancyFyn的博客
05-18 1712
页面中没有提供 router-view (路由视图) 当前的url地址没有与之匹配的路由规则去处理 <div id="app"> <!-- 渲染页面 --> <router-view></router-view> <hr /> <!-- 通过 router-link 提供一些超链接来实现路由的跳转功能 --> <ul> <li> .
umi-test-js.zip
08-06
Umi是阿里开源的一款企业级前端应用框架，它集成了路由、状态管理、插件机制等特性，简化了复杂项目的开发流程。Umi使用约定优于配置的理念，允许开发者快速上手并高效地组织项目结构。在这个案例中，Umi提供了一套...
Umi4入门到进阶-第二篇：路由系统全解析
最新发布
无
05-16 217
Umi 4的路由系统是其核心功能之一，支持约定式路由和配置式路由两种模式，能够满足多样化的业务需求。约定式路由通过src/pages目录结构自动生成路由，支持动态路由、嵌套路由和自定义404页面，简化了路由配置。配置式路由则通过.umirc.ts或config/config.ts文件进行精确控制，支持路由分组、模块化配置和权限路由控制，适用于复杂场景。Umi 4的路由系统灵活且强大，帮助开发者高效构建前端应用。
umi：umi-study
02-17
umi是阿里巴巴开源的一款前端应用框架，专注于解决复杂前端工程化问题。umi-study是一个学习umi框架的项目，它可以帮助开发者深入了解umi的特性和工作原理，从而更好地利用umi进行项目开发。 umi框架基于React，它...
Umi.js：登录之后需要手动刷新权限菜单才能渲染
席木木的博客
04-21 625
Umi.js：如何解决登录之后需要手动刷新权限菜单才能渲染？
umi3中约定式路由解决404无效
咕咚在否的博客
10-30 3633
官方文档如图，经使用发现404无效，打印routes发现数据层有问题，做出对应修改后可正常加载404页面。 src/app.tsx中设置如下代码段 export function patchRoutes({ routes }) { routes[0].routes.push({ path: '*', component: require('@/pages/404').default, }); } ...
Umi踩坑：Umi路由配置（原理、解决办法）
热门推荐
实事求是，艰苦奋斗，小小的梦想，终将实现。
12-15 2万+
前言 以前都是使用vue的脚手架或者是node.js中的路由配置，当用惯了这些后，在使用Umi发现路由怎么都配置不对，我淦！！！，这个游戏也太难了。配了半天也配不对，去官网研究了以下，发现是一个思维逻辑出现了错误。我们来看看。 提示：以下是本篇文章正文内容，下面案例可供参考 一、问题描述 我们就拿vue来说。 import Vue from 'vue' import Router from 'vue-router' //import Login from '.././views/login.vue' //
react路由
m0_62823653的博客
07-18 890
第一部分路由基本使用第一部分路由基本使用。
React-路由架构-Route中的render 不显示页面的问题
梁什么鸭“的博客
04-14 1933
使用 react-router-dom 的版本是 5.3.0 整体路由架构这里不详细说明，仅针对路由配置中关于 Route 的 render 的使用进行分析。 页面实现效果 当本地存储中没有 token 授权，重定向到 login 页面，否则进入 Sandbox 页面 错误使用 export default function IndexRouter() { return ( <HashRouter> <Switch> <Route pat
react 路由切换页面渲染两次
supming1的专栏
09-04 2526
用react 开发时，我们一般会写一个layout层，同事在layout层做了动画，大致代码如下 <TransitionGroup className={styles['route-ani-wrap']} childFactory= {this._getChild}> <CSSTransition key={location.pathname} timeout={300}> {children} </CSSTransition> </Tr
react router 点击路由菜单后菜单消失，路由组件不显示问题
lingliu0824的博客
05-07 1595
期望效果： 点击头部菜单，下面显示对应的路由组件。 问题：点击菜单后，菜单消失，也没有相应的路由组件显示，效果如下： 原因：父级路由的exact设置了值为true： 设置父级的exact参数为false： ...
路由传参改变，由于组件复用，导致组件不刷新问题的解决
qq_43695425的博客
04-01 594
不同路由复用了同一组件 { path: '/signStudent', name: 'signStudent', component: SignStudent, meta: { //needLogin:true, keepAlive: false // 不需要被缓存 }, }, { path: '/projectStudent', name:
重复进入同一个动态页面路由，页面不更新
weixin_46748834的博客
01-29 1434
解决重复跳转同一个动态路由页面后，页面内容不更新
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值