003-ant design pro 路由和菜单 / 憋错料

一、概述

　　参看地址：https://pro.ant.design/docs/router-and-nav-cn

二、原文摘要

　　路由和菜单是组织起一个应用的关键骨架，我们的脚手架提供了一些基本的工具及模板，帮助你更方便的搭建自己的路由/菜单。

　　如果你想了解更多关于 browserHistory 和 hashHistory，请参看构建和发布。

注意：我们的脚手架依赖 [email protected]，路由方面是基于 [email protected] 的实现，在写法以及 API 上与之前的版本有较大不同，所以，在开始前你需要具备一些相关的基础知识。这里给出几篇关键文档：

react-router

Migrating from v2/v3 to v4

[email protected]

Webpack Code Splitting

2.1、基本结构

脚手架通过结合一些配置文件、基本算法及工具函数，搭建好了路由和菜单的基本框架，主要涉及以下几个模块/功能：

路由生成 结合路由信息的配置文件和预设的基本算法，提供了在不同层级文件中自动生成路由列表的能力。
菜单生成 由确定数据结构的菜单配置文件生成，其中的菜单项名称，嵌套路径与路由有一定关联关系。
面包屑 组件 PageHeader 中内置的面包屑也可由脚手架提供的配置信息自动生成。

简单介绍下各个模块的基本思路。

2.1.1、路由

目前在脚手架中，除了顶层路由，其余路由列表都是自动生成，其中最关键的就是中心化配置文件 src/common/router.js，它的主要作用有两个：

配置路由相关信息。如果只考虑生成路由，你只需要指定每条配置的路径及对应渲染组件。
输出路由数据，并将路由数据（routerData）挂载到每条路由对应的组件上。

这样我们得到一个基本的路由信息对象，它的结构大致是这样：

{
  ‘/dashboard/analysis‘: {
    component: DynamicComponent(),
    name: ‘分析页‘,
  },
  ‘/dashboard/monitor‘: {
    component: DynamicComponent(),
    name: ‘监控页‘,
  },
  ‘/dashboard/workplace‘: {
    component: DynamicComponent(),
    name: ‘工作台‘,
  },
}

为了帮助自动生成路由，在 src/utils/utils.js 中提供了工具函数 getRoutes，它接收两个参数：当前路由的 match 路径及路由信息 routerData，主要完成两个工作：

筛选路由信息，筛选的算法为只保留当前 match.path 下最邻近的路由层级（更深入的层级留到嵌套路由中自行渲染），举个例子(每条为一个 route path)：

// 当前 match.path 为 /
/a                 // 没有更近的层级，保留
/a/b               // 存在更近层级 /a，去掉
/c/d               // 没有更近的层级，保留
/c/e               // 没有更近的层级，保留
/c/e/f             // 存在更近层级 /c/e，去掉

自动分析路由 exact 参数，除了下面还有嵌套路由的路径，其余路径默认设为 exact。

经过 getRoutes 处理之后的路由数据就可直接用于生成路由列表：

// src/layouts/BasicLayout.js
getRoutes(match.path, routerData).map(item => (
  <Route
    key={item.key}
    path={item.path}
    component={item.component}
    exact={item.exact}
  />
))

注意：如果你不需要自动生成路由，也可以用 routerData 自行处理。

2.1.2、菜单

菜单信息配置在 src/common/menu.js 中，它的作用是：

配置菜单相关数据，菜单项的跳转链接为配置项及其所有父级配置 path 参数的拼接。
为 src/common/router.js 提供路由名称（name）等数据，根据拼接好的跳转链接来匹配相关路由。

如果你的项目并不需要菜单，你也可以直接在 src/common/router.js 中配置 name 信息。

配置文件输出的菜单数据，可以直接提供给侧边栏组件使用。SiderMenu.js。除了生成菜单，菜单数据还可辅助生成重定向路由等模块，参考 BasicLayout.js#L154。

2.1.3、面包屑

　　之前提到的路由信息 routerData 可以直接传递给 PageHeader 组件用以生成面包屑，你可以用 props 或者 context 的方式进行传递。脚手架里的示例。

2.2、需求示例

2.2.1、新增页面

　　脚手架默认提供了两种布局模板：基础布局 - BasicLayout 以及 账户相关布局 - UserLayout，如上文提供的两种图片。

　　如果你的页面可以利用这两种布局，那么只需要在路由及菜单配置中增加一条即可：

1》增加路由配置

// src/common/router.js
‘/dashboard/test‘: {
  component: dynamicWrapper(app, [‘monitor‘], () => import(‘../routes/Dashboard/Test‘)),
},

2》菜单配置

// src/common/menu.js
const menuData = [{
  name: ‘dashboard‘,
  icon: ‘dashboard‘,  // https://demo.com/icon.png or <Icon type="dashboard" />
  path: ‘dashboard‘,
  children: [{
    name: ‘分析页‘,
    path: ‘analysis‘,
  }, {
    name: ‘监控页‘,
    path: ‘monitor‘,
  }, {
    name: ‘工作台‘,
    path: ‘workplace‘,
  }, {
    name: ‘测试页‘,
    path: ‘test‘,
  }],
}, {
  // 更多配置
}];

加好后，会默认生成相关的路由及导航。

2.2.2、新增布局模板

　　如果提供的布局不能满足你的要求，就需要自己新建 Layout 模板了。假设有两个新的页面需要使用新模板，你需要先配置好路由及菜单：

1》路由设置

// src/common/router.js
‘/new‘: {
  component: dynamicWrapper(app, [‘monitor‘], () => import(‘../layouts/NewLayout‘)),
},
‘/new/page1‘: {
  component: dynamicWrapper(app, [‘monitor‘], () => import(‘../routes/New/Page1‘)),
},
‘/new/page2‘: {
  component: dynamicWrapper(app, [‘monitor‘], () => import(‘../routes/New/Page2‘)),
},

2》菜单设置

// src/common/menu.js
const menuData = [{
  name: ‘新布局‘,
  icon: ‘table‘,
  path: ‘new‘,
  children: [{
    name: ‘页面一‘,
    path: ‘page1‘,
  }, {
    name: ‘页面二‘,
    path: ‘page2‘,
  }],
}, {
  // 更多配置
}];

在根路由中增加这组新模板：

// src/router.js
<Router history={history}>
  <Switch>
    <Route path="/new" render={props => <NewLayout {...props} />} />
    <Route path="/user" render={props => <UserLayout {...props} />} />
    <Route path="/" render={props => <BasicLayout {...props} />} />
  </Switch>
</Router>

然后在你的新模板中，仿照 src/layouts/BasicLayout.js 或 src/layouts/UserLayout.js 生成路由列表即可。

2.3、带参数的路由/菜单

脚手架默认支持带参数的路由、菜单及面包屑配置，直接在路由的 key 以及菜单中的 path 配置即可：

1》路由

// src/common/router.js
‘/dashboard/:workplace‘: {
  component: dynamicWrapper(app, [‘chart‘], () => import(‘../routes/Dashboard/Workplace‘)),
},
‘/:list/table-list‘: {
  component: dynamicWrapper(app, [‘rule‘], () => import(‘../routes/List/TableList‘)),
},

2》菜单

// src/common/menu.js
const menuData = [{
  name: ‘dashboard‘,
  icon: ‘dashboard‘,
  path: ‘dashboard‘,
  children: [{
    name: ‘分析页‘,
    path: ‘analysis‘,
  }, {
    name: ‘监控页‘,
    path: ‘monitor‘,
  }, {
    name: ‘工作台‘,
    path: ‘:workplace‘,
  }],
}, {
  name: ‘列表页‘,
  icon: ‘table‘,
  path: ‘:list‘,
  children: [],
}, {
  // 更多配置
}];

2.4、嵌套布局

　　有时在当前 layout 下还需要嵌套其他布局，例如有几个页面都需要展示同一个模块，你可以把这部分提炼出来变成一个新的布局，再到该布局下生成路由列表。与新增布局模板的区别，只是不需要将它增加到根路由中。具体可以参照 src/common/router.js /list/search 相关配置，及相关组件文件。

2.5、嵌套路由同级展示

　　脚手架默认使用工具函数 getRoutes 对 routerData 进行处理，然后生成路由列表，根据基本算法，在每一级组件中只会渲染当前 match.path 下最邻近的路由，所以，如果你要实现嵌套路由的同级展示（如：将 /list/search 和 /list/search/projects 在同一个地方渲染），就需要手动获取该路由的数据并添加在合适的地方。

{/* src/layouts/BasicLayout.js 类比你的上层 layout 组件 */}
<Content style={{ margin: ‘24px 24px 0‘, height: ‘100%‘ }}>
  <div style={{ minHeight: ‘calc(100vh - 260px)‘ }}>
    <Switch>
      {/* 默认生成的路由列表，不包含 /list/search/projects */}
      {
        getRoutes(match.path, routerData).map(item => (
          <Route
            key={item.key}
            path={item.path}
            component={item.component}
            exact={item.exact}
          />
        ))
      }
      {/* 补充 /list/search/projects 的路由 */}
      <Route exact path="/list/search/projects" component={routerData[‘/list/search/projects‘].component} />
      <Redirect exact from="/" to="/dashboard/analysis" />
      <Route render={NotFound} />
    </Switch>
  </div>
</Content>

同时在嵌套 layout 的文件中去掉这一条路由（如果还有下层路由需要 render）。

{/* src/routes/List/List.js 类比你的嵌套 layout 组件 */}
<Switch>
  {
    getRoutes(match.path, routerData).filter(item => item.path !== ‘/list/search/projects‘).map(item =>
      (
        <Route
          key={item.key}
          path={item.path}
          component={item.component}
          exact={item.exact}
        />
      )
    )
  }
</Switch>

2.6、隐藏菜单

如果需要隐藏某条菜单项，可以在该条数据中增加 hideInMenu 参数。

hideInMenu: true,  // 隐藏该条，或隐藏该组

2.7、隐藏面包屑

如需隐藏面包屑中的某个层级，可以增加 hideInBreadcrumb 属性。

// src/common/router.js
‘/dashboard/analysis‘: {
  component: dynamicWrapper(app, [‘chart‘], () => import(‘../routes/Dashboard/Analysis‘)),
  hideInBreadcrumb: true,  // 隐藏该条
},
‘/dashboard/monitor‘: {
  component: dynamicWrapper(app, [‘monitor‘], () => import(‘../routes/Dashboard/Monitor‘)),
},

2.8、关于 dynamicWrapper

import dynamic from ‘dva/dynamic‘;

// wrapper of dynamic
const dynamicWrapper = (app, models, component) => dynamic({
  app,
  // eslint-disable-next-line no-underscore-dangle
  models: () => models.filter(m => !app._models.some(({ namespace }) => namespace === m)).map(m => import(`../models/${m}.js`)),
  // add routerData prop
  component: () => {
    const routerData = getRouterData(app);
    return component().then((raw) => {
      const Component = raw.default || raw;
      return props => <Component {...props} routerData={routerData} />;
    });
  },
});import dynamic from ‘dva/dynamic‘;

// wrapper of dynamic
const dynamicWrapper = (app, models, component) => dynamic({
  app,
  // eslint-disable-next-line no-underscore-dangle
  models: () => models.filter(m => !app._models.some(({ namespace }) => namespace === m)).map(m => import(`../models/${m}.js`)),
  // add routerData prop
  component: () => {
    const routerData = getRouterData(app);
    return component().then((raw) => {
      const Component = raw.default || raw;
      return props => <Component {...props} routerData={routerData} />;
    });
  },
});

为了代码的简洁性，我们对 dva/dynamic 进行了二次封装，需要注意的是这里使用了 Webpack Code Splitting 的动态 import，dva 的 dynamic 方法已经帮我们封装好了 Promise 动态加载的相关事宜，所以我们只需要直接使用即可。

原文地址：https://www.cnblogs.com/bjlhx/p/8973944.html

时间： 2024-08-30 15:39:29

003-ant design pro 路由和菜单

一、概述

二、原文摘要

2.1、基本结构

2.1.1、路由

2.1.2、菜单

2.1.3、面包屑

2.2、需求示例

2.2.1、新增页面

2.2.2、新增布局模板

2.3、带参数的路由/菜单

2.4、嵌套布局

2.5、嵌套路由同级展示

2.6、隐藏菜单

2.7、隐藏面包屑

2.8、关于 dynamicWrapper

003-ant design pro 路由和菜单的相关文章

Ant Design Pro路由菜单

SpringBoot整合Ant Design Pro进行部署

ant design pro （十二）advanced UI 测试

ant design pro （十四）advanced 使用 CLI 工具

Ant Design Pro 中的服务端交互

Nginx 部署 Ant Design pro

如何创建Pull Request,以开源项目ant design pro为例

实战 ant design pro 中的坑

使用React+Umi+Ant Design Pro实现生产环境动态切换主题,支持暗黑主题