在 Umi.js 中设置 Layout 及其意义

慕仲卿
856 阅读3分钟

在 Umi.js 中，合理设置 Layout 不仅有助于提升用户体验，还能提高代码的复用性和可维护性。本文探讨在 Umi.js 项目中如何设置 Layout ，并解释其生效机制及其在实际项目中的意义。

image.png

1. Layout的生效机制

首先在根目录下面创建 layouts/index.tsx 和 layouts/index.less 文件。然后在 layouts/index.tsx 写入下面的代码：

import React from 'react';
import store from 'store';
import { ConfigProvider } from 'antd';
import { Outlet } from '@umijs/max';
import Intl from 'react-intl-universal';
import intlzhCN from '@/locales/zh-CN';
import intlenUS from '@/locales/en-US';
import "./index.less";

const locale = {
  'zh-CN': require('antd/lib/locale/zh_CN'),
  'en-US': require('antd/lib/locale/en_US'),
};

const BasicLayout: React.FC<any> = (props) => {
  const { children } = props;
  const lang = store.get('umi_locale') || 'zh-CN';
  Intl.init({
    currentLocale: lang,
    locales: {
      'zh-CN': intlzhCN,
      'en-US': intlenUS,
    },
  });

  return (
    <ConfigProvider componentSize="small" locale={locale[lang].default}>
      {children}
      <Outlet />
    </ConfigProvider>
  );
};

export default BasicLayout;

接下来，在 .umirc.ts 中配置路由规则，如下所示：

import { defineConfig } from '@umijs/max';
export default defineConfig({
  antd: {},
  access: {},
  model: {},
  initialState: {},
  request: {},
  publicPath:'./',
  plugins: ['umi-plugin-keep-alive'],
  routes: [
    {
      path: '/',
      component: '@/layouts/index',
      routes: [
        { path: '/', redirect: 'Login' },
        { path: '/Login', component: '@/pages/Login', title: '登录' },
      ],
    },
  ],
  headScripts: [
    // 'http://polyfill.alicdn.com/v3/polyfill.min.js', // or https://polyfill.io/v3/polyfill.min.js
  ],
  legacy: {},
  cssLoaderModules: {
    // 配置驼峰式使用
    exportLocalsConvention: 'camelCase'
  },
  proxy: {
    '/api/': {
      target: 'http://8888:80',
      changeOrigin: true,
      secure: false,
      pathRewrite: { '^': '' },
      caches: false,
    },
  },
  targets: { chrome: 67, ie: 9, ios: 7, android: '4.3' },
  hash: true,
  history: { type: 'hash' },
  devtool: false,

  inlineLimit: 10240,
  metas: [
    { name: 'keywords', content: 'keywords' },
    { name: 'description', content: 'description' },
    {
      name: 'viewport',
      content:
        'width=device-width,initail-scale=1,maximum-scale=1,minmum-scale=1',
    },
  ],
  title: 'DEMO',
});

在Umi.js项目中，Layout的生效主要依赖于路由配置和组件的嵌套。在上面的代码中，我们不难看到在.umirc.ts配置文件中定义了路由规则。在这个配置中，根路径'/'被映射到了@/layouts/index组件，这意味着当用户访问应用的根路径时，会加载并渲染layouts/index.tsx中定义的BasicLayout组件。

BasicLayout组件内部使用了Outlet组件，这是Umi.js提供的一个特殊组件，用于渲染当前路由下的子路由对应的组件。在routes配置中，我们可以看到'/'路径下有两个子路由：一个是重定向到'/Login'的默认子路由，另一个是对应登录页面的'/Login'路由。当用户访问这些子路由时，对应的组件（如Login页面）会在BasicLayout的Outlet位置被渲染出来。

此外，BasicLayout还负责了国际化配置、全局样式引入以及 Ant Design 组件库的配置等任务，这些配置为整个应用提供了统一的视觉风格和交互体验。

2. 设置 Layout 的意义

  1. 统一的用户界面：通过设置统一的 Layout ，可以确保应用具有一致的用户界面和交互体验。无论用户处于应用的哪个部分，他们都能看到一个熟悉的框架和布局，这有助于提升用户体验。

  2. 代码复用和可维护性：将通用的 UI 元素（如导航栏、侧边栏、页脚等）放在 Layout 组件中，可以避免在每个页面组件中重复编写相同的代码。这不仅提高了代码的复用性，还使得未来对这些通用元素的修改变得更加集中和方便。

  3. 灵活性：通过使用嵌套路由和 Outlet 组件，Umi.js 允许开发者在保持整体布局一致性的同时，为不同的页面或功能区域提供定制化的内容。这种灵活性使得应用能够适应各种复杂的业务需求和用户界面设计。

  4. 易于扩展：随着应用规模的增长和功能的增加，新的页面和组件可以轻松地添加到现有的 Layout 结构中，而无需对现有代码进行大规模的修改或重构。

因此，在 Umi.js 中合理设置 Layout 是实现高效、可维护和用户友好的前端应用的关键步骤之一。

avatar
文章
阅读
粉丝