1. The configuration

First, as mentioned earlier, Umi is configured in either.umirc.ts or config/config.ts (one of two options, with.umirc.ts having higher priority). Configuration is done by convention. For example, if AntDesign layout is required, set layout configuration; if multilingual configuration is required, set locale:

  layout: {
    name: 'Ant Design'
  },
  locale: {
    default: 'zh-CN'
  },

2. Local temporary configuration

You can create a new configuration. Umirc.local. ts. This configuration will be deep merge with. Umirc.ts to form the final configuration.

Note:
.umirc.local.tsOnly in the
umi devAvailable at the time.
umi buildWill not be loaded when.

The following points need to be noted:

  • config/config.tsThe corresponding isconfig/config.local.ts
  • .local.tsIs a temporary configuration used for local validation, add it to.gitignore.Do not commit to a Git repository
  • .local.tsConfiguration has the highest priority, thanUMI_ENVThe specified configuration is higher

3. Runtime configuration

Configuration file: SRC /app.tsx runtime configuration, which means that the configuration is configured at browser runtime, so this configuration file cannot introduce Node dependency packages (Node dependency packages are referenced at front-end publishing, runtime configuration does not participate in publishing).

With runtime configuration, yes
Modify the coverOr,
supplementDefault configuration content in the framework.

The run-time configuration options are as follows:

  • modifyClientRenderOpts(fn)

Modify the ClientRender parameter.

For example, dynamically modify the render root node in the micro front end:

let isSubApp = false; export function modifyClientRenderOpts(memo) { return { ... memo, rootElement: isSubApp ? 'sub-root' : memo.rootElement, }; }

  • patchRoutes({ routes })

Modify the route.

For example, add a /foo route at the front,

export function patchRoutes({ routes }) {

     routes.unshift({

     path: '/foo',

     exact: true,

     component: require('@/extraRoutes/foo').default,

 });

}

For example, in conjunction with the render configuration, the request server dynamically updates the route based on the response.

let extraRoutes; export function patchRoutes({ routes }) { merge(routes, extraRoutes); } export function render(oldRender) { fetch('/api/routes').then(res=>res.json()).then((res) => { extraRoutes = res.routes; oldRender(); })}

Note: Modify Routes directly without returning

  • render(oldRender: Function)

Overwrite the render.

For example, to check permissions before rendering,

import { history } from 'umi';

export function render(oldRender) {

 fetch('/api/auth').then(auth => {

     if (auth.isLogin) { oldRender() }

     else { 

         history.push('/login'); 

         oldRender()

     }

 });

}

  • onRouteChange({ routes, matchedRoutes, location, action })

Do a few things during initial load and route switching.

For example, to do buried-point statistics,

export function onRouteChange({ location, routes, action }) {

 bacon(location.pathname);

}

For example, to set the title,

export function onRouteChange({ matchedRoutes }) { if (matchedRoutes.length) { document.title = matchedRoutes[matchedRoutes.length - 1].route.title || ''; }}

  • rootContainer(LastRootContainer, args)

The changes are handed to the root component when rendered by React – Dom.

For example, to create a Provider out of the home,

export function rootContainer(container) {

 return React.createElement(ThemeProvider, null, container);

}

The args contains:

  • Routes, full routing configuration
  • Plugin, the runtime plug-in mechanism
  • History, History instance

Umi allows plug-ins to register for runtime configuration, and if you use plug-ins, you’ll definitely find more runtime configuration items in the plugins.

Umijs 3.X: How to use Configure Routing from scratch: Configure Routing from scratch: Configure Routing from scratch: Configure Routing from scratch: Configure Routing