使用ANT-設計-PRO開発システムUmiJs、自分のインターフェイスを設定し、ルーティング

アドレス参照文書は、以下の情報は、以下のようにプロジェクトが開始し、プロジェクトテンプレート初期化されていますさ

国際開発をオフにします。1.

NPM実行I18N-削除を実行します。1.

2. SRCの下のロケールパッケージを削除します。

2.設定は、インタフェース環境は、言いませんが、このニーズは記事上記のようにconfigフォルダ構成を定義するために追加します

3.設定し、独自開発のインターフェイスアドレス

configフォルダでは、あなたのインターフェイスアドレスに、config.jsのにプロキシエージェントを変更

4.試験の後

サービスにおけるtest.jsテストフォルダを追加します。

import request from '@/utils/request';
export async function test() {
  return request('/api/links');
}

ページのフォルダで使用ようこそコンポーネントは、印刷の下部を表示するには、ページを更新します

import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { test } from '@/services/test';
test().then(res => {
  console.log(res);
});
export default () => <div>hello world</div>;

 

独自のルーティングページを追加します。5.

1.まず、ホームを追加

ページディレクトリのホーム/ index.jsxを作成します。

import React from 'react';
export default () => <div>Home page</div>;

2. [変更変数定義の形を変えconfig.jsの中でルートを見つけるために、ルーティング設定は、もちろん、あなたも直接変更は、インポートを使用していない、導入の導入は道を必要とする際に、個別に引き出すことができることができ、リフレッシュページ

const routes = [
  {
    path: '/',
    component: '../layouts/BasicLayout',
    routes: [
      {
        path: '/',
        name: '主页',
        icon: 'smile',
        component: './home',
      },
      {
        component: './404',
      },
    ],
  },
  {
    component: './404',
  },
];

あなたは、あなた自身の参照は、それを文書化UMI、各プロパティに関して何を意味するのです！

3.転位二次ルーティングユーザメニュー

ルーティング構成を変更4.

const routes = [
  {
    path: '/',
    component: '../layouts/BasicLayout',
    routes: [
      {
        path: '/',
        name: '主页',
        icon: 'smile',
        component: './home',
      },
      {
        path: '/user',
        name: '用户管理',
        icon: 'smile',
        routes: [
          {
            path: '/user/userList',
            name: '用户列表',
            icon: 'smile',
            component: './user/UserList',
          },
          {
            path: '/user/userManager',
            name: '用户管理',
            icon: 'smile',
            component: './user/UserManger',
          },
          {
            path: '/user/userResource',
            name: '用户资源',
            icon: 'smile',
            component: './user/UserResource',
          },
        ],
      },
      {
        component: './404',
      },
    ],
  },
  {
    component: './404',
  },
];

5. [更新ページを自由に切り替えることができます

6.設定着陸、海の規定は、レイアウトフォルダの下に定義されたテンプレートを借りて、レイアウトをルーティング独自のカスタムを提供する必要があります

ページにログイン/ index.jsxのランディングページを作成します。

import React from 'react';
export default () => <div>Login</div>;

ルーティングを変更します。7.

const routes = [
  {
    path: '/login',
    component: '../layouts/UserLayout',
    routes: [
      {
        path: '/login',
        component: './login',
      },
    ],
  },
  {
    path: '/',
    component: '../layouts/BasicLayout',
    routes: [
      {
        path: '/',
        name: '主页',
        icon: 'smile',
        component: './home',
      },
      {
        path: '/user',
        name: '用户管理',
        icon: 'smile',
        routes: [
          {
            path: '/user/userList',
            name: '用户列表',
            icon: 'smile',
            component: './user/UserList',
          },
          {
            path: '/user/userManager',
            name: '用户管理',
            icon: 'smile',
            component: './user/UserManger',
          },
          {
            path: '/user/userResource',
            name: '用户资源',
            icon: 'smile',
            component: './user/UserResource',
          },
        ],
      },
      {
        component: './404',
      },
    ],
  },

  {
    component: './404',
  },
];

8.手動で着陸にページジャンプを更新

ものの残りの部分とああDVA、ラインと自分自身をバーのリファレンスドキュメントであります

 

なお、代理公開本番環境のインターフェイスアドレスは、運用・保守インタフェースアドレスが設定ngiux前方ライン聞かせすることを忘れないでください、またはあなたがインターフェイスのアドレスを見つけることができません