Router and Nav

Routing and menus are the key skeletons for organizing an application. The routes in pro are centrally managed in a convenient way to manage and manage them in router.config.js.

Basic Structure#

In this part, scaffolding builds the basic framework of routing and menus by combining some configuration files, basic algorithms and tool functions, mainly involving the following modules/functions:

  • Routing Management Configure the route in router.config.js according to the agreed syntax.
  • Menu generation Generates a menu based on the routing configuration. The name of the menu item, the nested path is highly coupled to the route.
  • Breadcrumbs component The breadcrumbs built into PageHeader can also be automatically generated from the configuration information provided by the scaffolding.

The following is a brief introduction to the basic ideas of each module. If you are not interested in the implementation process, just want to know how to implement the relevant requirements, you can directly view requirements instance.

Router#

At present, all the routes in the scaffolding are managed by router.config.js. In the configuration of umi, we add some parameters, such as name, icon, hideChildren, authority, to assist the generation. menu. among them:

  • name and icon represent the icon and text of the generated menu item, respectively.
  • hideChildrenInMenu is used to hide sub-routes that do not need to be displayed in the menu. Usage can view the configuration of the Step by Step Form.
  • hideInMenu can not display this route in the menu, including sub-routing. The effect can be viewed on the exception/trigger page.

  • authority is used to configure the permissions of this route. If configured, it will verify the permissions of the current user and decide whether to display it.

    You may notice that the name in the configuration is different from the actual display of the menu. This is because we use the global component, see i18n.

The menu is generated according to router.config.js, and the concrete logic is implemented in the formatter method in src/layouts/BasicLayout.

If your project does not require a menu, you can remove the mount of the SiderMenu component directly in BasicLayout. And set const MenuData = [] in src/layouts/BasicLayout.

request a menu from the server#

Just update menuData in models/menu, which is a json array. Just the server returns a json of similar format.

[
  {
    path: '/dashboard'，
    name: 'dashboard'，
    icon: 'dashboard'，
    children: [
      {
        path: '/dashboard/analysis'，
        name: 'analysis'，
        exact: true，
      }，
      {
        path: '/dashboard/monitor'，
        name: 'monitor'，
        exact: true，
      }，
      {
        path: '/dashboard/workplace'，
        name: 'workplace'，
        exact: true，
      }，
    ]，
  }
  ...
]

Note that path must be defined in routre.config.js.(All you need in Conventional Routing is the correct page.)

Breadcrumbs are implemented by PageHeaderWrapper, MenuContext will be passed to PageHeader via props according to the breadcrumbNameMap generated by MenuData. If you want to make custom breadcrumbs, you can modify the incoming breadcrumbNameMap solve.

breadcrumbNameMap sample data is as follows:

{
  '/': { path: '/', redirect: '/dashboard/analysis', locale: 'menu' },
  '/dashboard/analysis': {
    name: 'analysis',
    component: './Dashboard/Analysis',
    locale: 'menu.dashboard.analysis',
  },
  ...
}

Example#

The above outlines the implementation of this part, and then through the actual case to explain what to do.

You can fill the url directly into the path and the framework will handle it automatically.

{
    path: 'https://pro.ant.design/docs/getting-started-cn',
    name: "文档"
}

Add Page#

Scaffolding provides two layout templates by default: Basic Layout - BasicLayout and Account Layout - UserLayout:

BasicLayout

UserLayout

If your page can take advantage of both layouts, you only need to add one to the corresponding routing configuration:

  // app
  {
    path: '/',
    component: '../layouts/BasicLayout',
    routes: [
      // dashboard
      { path: '/', redirect: '/dashboard/analysis' },
      { path :'/dashboard/test',component:"./Dashboard/Test"},
    ...
},

When added, the relevant routing and navigation will be automatically generated.

Add layout#

In the scaffolding we implement the layout template by nesting the route. router.config.js is an array, the first level of which is our layout. If you need to add a new layout, you can directly add a new first-level element in the array.

module.exports = [
   // user
   {
    path: '/user',
    component: '../layouts/UserLayout',
    routes:[...]
   },
   // app
   {
    path: '/',
    component: '../layouts/BasicLayout',
    routes:[...]
   },
   // new
   {
    path: '/new',
    component: '../layouts/new_page',
    routes:[...]
   },
]

Use a custom icon in the menu#

Due to umi's limitations, the router.config.js is not directly With components, Pro temporarily supports the use of ant.design its own icon type, and the url of an img. Just configure it directly on the icon property. If it's a url, Pro will automatically process it as an img tag.

If this does not meet the requirements, you can customize getIcon method.

If you need to use the iconfont icon, you can try the custom icon for ant.desgin.

Routing with parameters#

Scaffolding supports routing with parameters by default, but it is not a good idea to display a route with parameters in the menu. We will not automatically inject a parameter for you, you may need to handle it yourself in the code.

{ path: '/dashboard/:page', hideInMenu: true, name: 'analysis', component: './Dashboard/Analysis' },

You can jump to this route with the following code:

import router from 'umi/router';

router.push('/dashboard/anyParams');

//or

import Link from 'umi/link';

<Link to="/dashboard/anyParams">go</Link>;

In the routing component, routing parameters can be obtained via this.props.match.params.

See more details:umi#router

LayoutNew Page