1. Configurable routing

Configurable routing is configured with the Routes object in a configuration file (.umirc.ts or config/config.ts). If there is no Routes configuration item, a contract route is automatically generated for the SRC /pages directory.

2. Convenient routing

Convenient routing is also called file routing, which does not require manual configuration. The file system is the routing, which is configured by analyzing directories and files and their names.

Without the Routes configuration, Umi goes into contract routing mode and then analyzes the SRC /pages directory to get the routing configuration.

Note that files that meet any of the following rules will not be registered as a route,

  • In order to. 或 _The opening file or directory
  • components 和 componentdirectory
  • utils 和 utildirectory
  • The file content does not contain JSX elements

1) Dynamic Routing

Conventions [] package files or folders for dynamic routing.

Such as:

  • src/pages/users/[id].tsxWill be a/users/:id
  • src/pages/users/[id]/settings.tsxWill be a/users/:id/settings

A complete example, such as the following file structure,

. └ ─ ─ pages └ ─ ─ [post] ├ ─ ─ index. The TSX └ ─ ─ comments. The TSX └ ─ ─ the users └ ─ ─ [id]. TSX └ ─ ─ index. The TSX

The routing configuration is generated,

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

The dynamic route generates the URL based on the dynamic parameters that are matched, which can then be used through props. Match.params. Fetch dynamic data. For example, in SRC /pages/users/[id]. TSX, you can get the id value using props. Match.Params.id.

2) Dynamic alternative routing

Contract [$] to wrap files or folders for dynamic alternative routing. For example: the SRC/pages/users / $[id]. TSX

The difference between dynamic alternative routing and dynamic routing is that a dynamic routing does not switch to the corresponding page of the routing without dynamic parameters. Dynamic alternative routes, on the other hand, display default page content without dynamic parameters. For example, when we go to /users/, we don’t see anything if it’s on the dynamic route, whereas the dynamic alternative route sees the corresponding page default content.

3) Nesting routing

In Umi, a nested route is generated when there is a _layout. TSX directory, and the _layout. TSX directory is the layout for the directory. The layout file needs to return a React component and render the child component with props. Children.

For example, the following directory structure,

. └ ─ ─ pages └ ─ ─ the users ├ ─ ─ _layout. The TSX ├ ─ ─ index. The TSX └ ─ ─ the list. The TSX

The route will be generated,

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

A simple _layout. TSX example:

const layout: React.FC = (props) => {
  return (
    <>
      <div>user page</div>
      { props.children }
    </>
  );
};
export default layout;

4) overall layout

Conform SRC /layouts/index.tsx to global routing. Also, return a React component and render the child component with props. Children.

A custom global layout looks like this:

import ProLayout from '@ant-design/pro-layout'; import { IRouteComponentProps } from 'umi'; const Layout: React.FC<IRouteComponentProps> = (props) => { return ( <ProLayout> <div>layout... </div> { props.children } </ProLayout> ) }; export default Layout;

5) Different global layouts

You may need to print different global layouts for different routes. Umi does not support this configuration, but you can still render different layouts by making location.path differences in SRC /layouts/index.tsx.

For example, if you want a simple layout for /login output:

import ProLayout from '@ant-design/pro-layout'; import { IRouteComponentProps } from 'umi'; const Layout: React.FC<IRouteComponentProps> = (props) => { if (props.location.pathname === '/login') { return <div>{ props.children }</div> } return ( <ProLayout> <div>layout... </div> { props.children } </ProLayout> ) }; export default Layout;

It’s important to note that just
Contracted routingYou cannot set more than one global layout file
index.tsxIn the
location.pathDo distinguish. If it is
Configurable routingIt is completely possible to set up multiple layouts for different routing pages (set them in the routing configuration file).

5) 404 routing

SRC /pages/404. TSX is a 404 page that returns the React component.

If the route accessed does not match the route generated by the convention, fallback to the 404 route will be fallback and rendered via SRC /pages/404. TSX.

A typical AntDesign 404 routing page:

import { Button, Result } from 'antd';
import React from 'react';
import { history } from 'umi';

const NoFoundPage: React.FC = () => (
  <Result
    status="404"
    title="404"
    subTitle="Sorry, the page you visited does not exist."
    extra={
      <Button type="primary" onClick={() => history.push('/')}>
        Back Home
      </Button>
    }
  />
);

export default NoFoundPage;

Umijs 3.X from scratch (5) : plugins (6) : Umijs 3