New Page

Last updated on 2021-02-06 22:10:83

This "page" refers to a module that is configured with a route and can be directly accessed through a link. To create a new page, usually only a simple configuration is required on the scaffold.

If you want to create new landing page, check this link

First, add js,less files

Create new js,less files under src/pages. If there are multiple related pages, you can create a new folder to place related files.

+   NewPage.ts
+   NewPage.less

For better Demonstration, we initialize the contents of NewPage.ts as follows:

export default () => {
  return <div>New Page</div>;

Temporarily do not add content to the style files in this document, you can also try to add them yourself.

Style files are used by default CSS Modules, If needed, you can import antd style variable file in the head of the file:

@import '~antd/lib/style/themes/default.less';

This makes it easy to get antd style variables and use them in your files, which helps to maintain the consistency of the page, and facilitate the implementation of custom themes.

Second, add the files into menus,routes

Because Ant Design Pro uses the configuration route of umi, you need to add the corresponding routing information in the configuration file config/config.ts:

    path: '/',
    component: '../layouts/BasicLayout',
    Routes: ['src/pages/Authorized'],
    routes: [
+     // new page
+     {
+       path: 'new',
+       name: 'new',
+       icon: 'plus-square',
+       component: 'NewPage',
+     },

Where icon and name are the required configuration in the menu component, and config/config.ts is also read in the menu component to add the relevant logic.

We implemented internationalization in Ant Design Pro 2.0, so you also need to add the relevant copy in src/locales/zh-CN.ts and src/locales/en-US:

// zh-CN.ts
export default {
  'navbar.lang': 'English',
+ '': '新页面',
  'menu.home': '首页',
// en-US.ts
export default {
  'navbar.lang': '中文',
+ '': 'New Page',
  'menu.home': 'Home',

Then visit http://localhost:8000/new to see the new page.

New Page

See the introduction in Router and Nav for more details on routing.

Three, add model, service

After the layout and routing are configured, go back to the newly created NewPage.js, and you can start writing business code!

If you need to use the data stream in dva, you also need to create the corresponding model and service in src/models src/services, which can be specific Refer to the writing of the built-in scaffolding page. However, we recommend using a lightweight data stream to manage data and using the openAPI plugin to generate serves.