- 概要
- antd pro 路由簡介
- 路由, 選單和面包屑
- 頁面之間的路由
- 帶引數的路由
- 總結
概要
路由配置是單頁應用的核心之一, antd pro 將所有的路由配置集中在一個檔案中, 可以更好的對應用的全域進行管理.
同時, 它的路由還和選單和面包屑自動關聯上了, 真的是給開發節省了大量的時間.
antd pro 路由簡介
首先創建一個 antd pro 的專案, 創建方法很簡單, 參見 antd pro 的檔案
antd pro 的路由組態檔在專案根目錄下的 config 檔案夾中: /config/config.js
這里簡單介紹路由相關的配置, 所以對默認生成的模板做一些改動, 去除登錄和權限的部分. 并定義一些示例的選單.
1 routes: [
2 {
3 path: '/',
4 component: '../layouts/BasicLayout',
5 routes: [
6 {
7 path: '/',
8 redirect: '/menu1/menu11/menu111',
9 },
10 {
11 path: '/menu1',
12 name: 'menu1',
13 routes: [
14 {
15 path: '/menu1/menu11',
16 name: 'menu11',
17 routes: [
18 {
19 path: '/menu1/menu11/menu111',
20 name: 'menu111',
21 component: './routeSample/Menu111',
22 },
23 {
24 path: '/menu1/menu11/menu112',
25 name: 'menu112',
26 component: './routeSample/Menu112',
27 },
28 ],
29 },
30 {
31 path: '/menu1/menu12',
32 name: 'menu12',
33 component: './routeSample/Menu12',
34 },
35 ],
36 },
37 {
38 path: '/menu2',
39 name: 'menu2',
40 routes: [
41 {
42 path: '/menu2/menu21',
43 name: 'menu21',
44 component: './routeSample/Menu21',
45 },
46 ],
47 },
48 ],
49 },
50 {
51 component: './404',
52 },
53 ],
如上配置后, 顯示的效果如下:
每個選單對應的頁面很簡單, 只是顯示一行文字:
1 # 頁面路徑
2 $ ls ./src/pages/routeSample
3 Menu111.jsx Menu112.jsx Menu12.jsx Menu21.jsx
頁面的代碼如下: (以 Menu111.jsx 為例)
1 import React from 'react';
2 import { PageHeaderWrapper } from '@ant-design/pro-layout';
3 import { Card } from 'antd';
4
5 export default () => (
6 <PageHeaderWrapper>
7 <Card>
8 <h1>這是選單1-1-1</h1>
9 </Card>
10 </PageHeaderWrapper>
11 );
路由, 選單和面包屑
在 config.js 中配置路由之后, 會自動生成選單和面包屑, 選單和面包屑的名稱就是 name 屬性定義的
1 {
2 path: '/menu2/menu21',
3 name: 'menu21', // 這個就是定義選單和面包屑顯示的名稱
4 component: './routeSample/Menu21',
5 },
這里的名稱是 menu21, 但是頁面上顯示的是 選單 2-1,
這是因為 antd pro 中默認啟用了國際化功能. 選單的名稱在 ./src/locales/zh-CN/menu.js 中配置
1 export default {
2 'menu.welcome': '歡迎',
3 'menu.home': '首頁',
4 'menu.menu1': '選單1',
5 'menu.menu1.menu11': '選單1-1',
6 'menu.menu1.menu11.menu111': '選單1-1-1',
7 'menu.menu1.menu11.menu112': '選單1-1-2',
8 'menu.menu1.menu12': '選單1-2',
9 'menu.menu2': '選單2',
10 'menu.menu2.menu21': '選單2-1',
11 };
頁面之間的路由
創建個新的頁面 Create.jsx, 添加測驗的按鈕, 在 menu112 中互相跳轉
首先, 在 config.js 中配置路由資訊
1 {
2 path: '/menu1/menu11/menu112',
3 name: 'menu112',
4 component: './routeSample/Menu112',
5 },
6 // 下面是新增的部分
7 {
8 path: '/menu1/menu11/menu112/create',
9 name: 'create',
10 hideInMenu: true, // 這里設定為true, 就不會顯示在選單中
11 component: './routeSample/Create',
12 },
Create.jsx 內容如下:
1 import React from 'react';
2 import { history } from 'umi';
3 import { PageHeaderWrapper } from '@ant-design/pro-layout';
4 import { Card, Button } from 'antd';
5
6 export default () => (
7 <PageHeaderWrapper>
8 <Card>
9 <h1>這是用來新增內容的頁面</h1>
10 <Button
11 onClick={() => {
12 history.goBack();
13 }}
14 >
15 回傳
16 </Button>
17 </Card>
18 </PageHeaderWrapper>
19 );
- umi3 中, 沒有 umi/router 這個 package 了, 需要使用 history 來進行路由跳轉, antd pro 中的相關檔案可能還沒有更新
- history.goBack() 用來回傳上一次的路由
Menu112.jsx 中放個測驗按鈕來跳轉到 這個新增頁面
1 export default () => (
2 <PageHeaderWrapper>
3 <Card>
4 <h1>這是選單1-1-2</h1>
5 <Button
6 type="primary"
7 onClick={() => {
8 history.push('/menu1/menu11/menu112/create');
9 }}
10 >
11 新增
12 </Button>
13 </Card>
14 </PageHeaderWrapper>
15 );
這樣, Create.jsx 和 Menu112.jsx 之間就可以來回跳轉了
帶引數的路由
再加個頁面 Edit.jsx, 演示路由中引數的傳遞.
同樣, 現在路由配置中加上 Edit.jsx 的路由
1 {
2 path: '/menu1/menu11/menu112/create',
3 name: 'create',
4 hideInMenu: true,
5 component: './routeSample/Create',
6 },
7 {
8 path: '/menu1/menu11/menu112/edit/:id', // 這里 :id 就是路由中的引數
9 name: 'edit',
10 hideInMenu: true,
11 component: './routeSample/Edit',
12 },
menu.js 中別忘了加上 name edit 對應的配置.
然后, 在 Menu112.jsx 中再增加一個 編輯 按鈕
1 import React from 'react';
2 import { history } from 'umi';
3 import { PageHeaderWrapper } from '@ant-design/pro-layout';
4 import { Card, Button } from 'antd';
5
6 export default () => (
7 <PageHeaderWrapper>
8 <Card>
9 <h1>這是選單1-1-2</h1>
10 <Button
11 type="primary"
12 onClick={() => {
13 history.push('/menu1/menu11/menu112/create');
14 }}
15 >
16 新增
17 </Button>
18
19 <Button
20 type="primary"
21 onClick={() => {
22 history.push('/menu1/menu11/menu112/edit/111');
23 }}
24 >
25 編輯
26 </Button>
27 </Card>
28 </PageHeaderWrapper>
29 );
這里傳入引數 id 的值是 111
最后是 Edit.jsx 頁面的代碼:
1 import React from 'react';
2 import { history, useParams } from 'umi';
3 import { PageHeaderWrapper } from '@ant-design/pro-layout';
4 import { Card, Button } from 'antd';
5
6 export default () => {
7 const params = useParams();
8 return (
9 <PageHeaderWrapper>
10 <Card>
11 <h1>這是用來編輯內容的頁面</h1>
12 <p>引數 ID: {params.id}</p>
13 <Button
14 onClick={() => {
15 history.goBack();
16 }}
17 >
18 回傳
19 </Button>
20 </Card>
21 </PageHeaderWrapper>
22 );
23 };
獲取引數就是使用 useParams 這個 API
總結
最后, 是幾個相關頁面的截圖:
- Menu112.jsx
- Create.jsx
- Edit.jsx
補充一點, 路由中引數盡量簡單, 如果頁面之間傳輸的資料比較多, 那么最好通過 antd pro 的 Model 來共享. 盡量不要在 url 中放置太多的東西.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/118321.html
標籤：JavaScript