react - umi 项目约定式路由配置

最新推荐文章于 2024-07-10 18:07:09 发布
最新推荐文章于 2024-07-10 18:07:09 发布
阅读量1.4k 收藏 3
点赞数
文章标签： react.js node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26705343/article/details/120512027
版权
本文介绍了Umi框架中的约定式路由配置，强调了如何通过文件系统自动生成路由，无需手动配置。在src/pages目录下，不包含(routes)配置时启用此模式。规则包括忽略特定文件，如.umirc.js，以及通过创建如index.js文件自动创建路由。通过在子目录创建_layout.jsx作为默认文件实现嵌套路由，并可通过props调用子组件。
摘要由CSDN通过智能技术生成

约定式路由

除配置式路由外，Umi 也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。

如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析 src/pages 目录拿到路由配置。

.
  └── pages
    ├── index.tsx
    └── users.tsx

会得到以下路由配置，

[
  {
    exact: true, path: '/', component: '@/pages/index' },
  {
    exact: true, path: '/users', component: '@/pages/users' },
]

最低0.47元/天 解锁文章
艾敲代码的MT
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
umi约定式路由基本了解
王为仁的博客
02-18 6956
umi约定式路由基本了解 先来看一下文档介绍 看重点 启动 umi dev 后，大家会发现 pages 下多了个 .umi 的目录。这是啥？这是 umi 的临时目录，可以在这里做一些验证，但请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。 先看一下我们umi dev的时候怎么运行的 #!/usr/bin/env node const re...
umi 约定式路由（基于React）
0.0 的博客
02-17 1876
要想在 umi 项目中使用约定式路由，直接将 .umirc.ts 文件中的 routes 属性删掉就可以了。 import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', }, fastRefresh: {}, }); 一、创建一级路由文件 我们在 pages 中分别创建 home、login 和 regi
umi 配置式路由（基于React）
0.0 的博客
02-17 6055
umi 中的路由分类两种： 配置式路由：开发者需要单独创建一个配置文件，通过各种属性或方法来实现对路由规则的配置； 约定式路由：开发者不需要手动配置，只需要按照 umi 的规则来创建路由目录和文件，umi 会自动根据文件目录将路由配置解析出来； 当项目中的路由结构比较简单，就可以使用约定式路由。如果是比较复杂的项目，都建议使用配置式路由。 一、路由模式 umi 项目中的路由模式默认是 history 模式，可以通过 history 属性来切换路由模式： import { defineConfig } f
通过Umijs从0到1搭建一个React项目
最新发布
A15029296293的博客
07-10 1108
有一阵时间没写react了，今天通过umi搭建一个demo项目复习一下react；umi是一个可扩展的企业级前端应用框架，在react市场中还是比较火的一个框架。
umi 常用配置
weixin_43294560的博客
07-18 5759
在.umirc.ts中的defineConfig的对象中配置 1、配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存。 hash:true, 默认为false 2、配置项目的根目录,还需配置第3个 base:'/x/' 默认为'/' 其中: 访问'/x/'路径才能访问项目的根路由 官方解释: 你有路由 / 和 /users，然后设置了 base 为 /foo/，那么就可以通过 /foo/ 和 /foo/users 访问到
umi react菜单配置（router文件路由+接口路由组合）
dmr123456的博客
05-16 927
【问题描述】：项目路由由前端路由文件以及后端接口获取到的路由组合而成，接口获取到的路由菜单选中无标记，且会自动折叠。如果接口返回的菜单格式与前端路由文件中的有些许不一致，则需重写。，重写菜单选中、打开逻辑。,对数据进行改造组合。
【react】配置路由
Aguai229的博客
07-29 1184
首先在src的同级目录下创建config文件夹，在文件中创建文件config.js文件在config.js文件中对路由进行配置。
react-umi可插拔的企业级react应用框架
08-14
Umi 由阿里系的 umijs 团队开发，它以路由为中心，借鉴了 Next.js 的一些设计理念，如约定式的路由配置和按需加载能力。 在 React 开发领域，UI 框架的选择对于提高开发效率和应用性能至关重要。Umi 就是这样一款...
umi-react:umi + egg全栈开发
03-27
1. **路由配置**：umi的路由系统与egg的路由系统需要协调一致，确保前端路由能正确映射到后端的控制器。 2. **状态管理**：umi-react可以结合Redux或MobX进行状态管理，而egg.js则可以通过Session、Cookie等方式...
umi-antd-pro::ghost:use umi conventional routing in Ant Design Pro 使用umi约定式路由多Tabs的Ant Design Pro（Antd Pro的实验项目）
05-22
适用于企业应用程序的即用型UI解决方案，作为React样板。 预览： ： 主页： http ： //pro.ant.design 文档： http : //pro.ant.design/docs/getting-started 变更日志： ...
egg-umi-dva
03-14
UMI 的核心理念是“约定优于配置”，使得项目结构更加规整，提高了开发效率。 3. **DVA**： DVA 是一个轻量级的 React 数据流管理库，它是基于 Redux 和 React-Router 的封装，引入了 GraphQL 支持，让状态管理和...
六. React实战 1.掌握企业级应⽤用框架 - umi 2.掌握数据流⽅方案 - dva
09-03
umi负责整体的项目管理和路由设置，而dva则关注数据流和业务逻辑。同时，generator和redux-saga则为异步操作提供了优雅的解决方案。通过深入学习和实践这些技术，开发者能够构建出更加健壮、可扩展的React应用。
umi 路由配置
大龙帅的博客
04-05 8809
一、基础路由 项目根目录下新建文件夹：config/routes.tsx （umi约定，位置不能错，不然引入会报错） routes.tsx import type { IRoute } from 'umi'; const routes: IRoute[] = [ { path: '/', component: '@/pages/index' } ]; export default routes; .umirc.ts这个文件内引入 简单介绍下这个文件：umi的配置文件，参考官方文档 impo
react+ts【项目实战一】配置项目/路由/redux
weixin_46738453的博客
02-16 2376
return (发现音乐我是downLoad的插槽{useRoutes(routes)}
React+umi增加路由权限
天生欧皇张狗蛋
07-14 8615
一、配置路由权限key 在资源文件 config/route.ts 配置 只有拥有了HOME（在 src/access.ts 中定义）权限，用户才可以访问该页面。 export const routes = [ { path: '/home', component: '/home', access: 'HOME', // 权限定义返回值的某个 key } ] 二、启用插件 @umijs/plugin-access @umijs/plugin-access 启用方式： 创
umi之路由系统
weixin_42114897的博客
04-09 5674
1.路由注册 1.约定式路由 通过文件路径来渲染 2.配置式路由 1.umi3 配置方式 在配置文件routes进行配置，格式为数组 export default { routes: [ { exact: true, path: '/', component: 'index' }, { exact: true, path: '/user', component: 'user' ...
react 之umi路由
gis_sss的博客
05-09 4433
一:umi的路由默认是按照约定生成的路由，即在src/page下建立一个文件，然后建立一个index.js页面，如src/page/mian/index.js. umi会自动根据约定的目录生成的路由就是http://localhost:8000/main,但是这样方式的可控性比较差。 二：配置式路由 （1）在page下面建立一个router.js为页面的总路由，暴露出路由的路径 ...
require.context 实现react-router6 约定式路由
07-22
要使用 `require.context` 实现 React Router 6 的约定式路由，需要做以下几个步骤： 1. 在项目中安装 React Router 6：`npm install react-router-dom@next` 2. 创建一个文件夹来存放所有的路由组件，比如 `pages` 文件夹。 3. 在 `pages` 文件夹下创建每个路由对应的组件文件，比如 `Home.js`、`About.js` 等。 4. 在 `pages` 文件夹下创建一个 `index.js` 文件，用于导出所有路由组件。 5. 在根目录下创建一个名为 `routes.js` 的文件，用于定义约定式路由规则。 下面是一个示例的 `routes.js` 文件： ```jsx import { lazy } from 'react'; // 使用 require.context 导入所有的路由组件 const pages = require.context('./pages', true, /\.js$/); const routes = [ { path: '/', element: lazy(() => import('./pages/Home')), }, { path: '/about', element: lazy(() => import('./pages/About')), }, ]; export default routes; ``` 在上面的示例中，我们使用 `require.context` 导入了 `pages` 文件夹下的所有 `.js` 文件，并且定义了每个路由的路径和对应的组件。 最后，在根组件中使用 React Router 6 的 `Routes` 组件来渲染路由： ```jsx import React, { lazy, Suspense } from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import routes from './routes'; const App = () => { return ( <Router> <Suspense fallback={<div>Loading...</div>}> <Routes> {routes.map((route, index) => ( <Route key={index} path={route.path} element={<route.element />} /> ))} </Routes> </Suspense> </Router> ); }; export default App; ``` 在上面的示例中，我们遍历 `routes` 数组，并使用 `Route` 组件来渲染每个路由。 这样就可以使用 `require.context` 实现 React Router 6 的约定式路由了。注意，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值