使用开源微前端框架 Luigi 创建一个基于微前端架构的工程 (4)

导航到 react-core-mf/src/views 并创建一个包含以下内容的文件 List.jsx：

import React from \'react\'; import { MessageStrip, Avatar, LayoutPanel, LayoutGrid } from \'fundamental-react\'; const NO_AVAILABLE_PRODUCT_MSG = \'Unfortunately, there is no available product at this moment.\'; const panelStyle = { cursor: \'pointer\' }; export const List = ({ items }) => ( (items.length === 0) ? <MessageStrip type=\'error\'>{NO_AVAILABLE_PRODUCT_MSG}</MessageStrip> : items.map(({id, name, price, icon, stock}) => { return ( <LayoutPanel key={id} style={panelStyle}> <LayoutPanel.Header> <LayoutPanel.Head title={name} /> </LayoutPanel.Header> <LayoutPanel.Body> <LayoutGrid cols={2}> <div> <div>Price: &euro;{price}</div> <div>Stocks: {stock}</div> </div> <div><Avatar circle glyph={icon} size=\'s\' /></div> </LayoutGrid> </LayoutPanel.Body> </LayoutPanel> ) }) );

Products.jsx：

import React from \'react\'; import { List } from \'./List.jsx\'; import { ProductCollection } from \'../../../ui5-mf/uimodule/webapp/model/products.json\'; import { LayoutPanel, LayoutGrid } from \'fundamental-react\'; export const Products = () => ( <section className="fd-section"> <LayoutPanel> <LayoutPanel.Header> <h3>Items ({ProductCollection.length})</h3> </LayoutPanel.Header> <LayoutPanel.Body> <LayoutGrid cols={2}> <List items={ProductCollection} /> </LayoutGrid> </LayoutPanel.Body> </LayoutPanel> </section> ); export default Products; Add "Products" view to Luigi app

在这一步中，您将在 Luigi 中为“产品”微前端添加一个导航节点。

编辑 react-core-mf/public/luigi-config.js：

在导航中添加一个新的“产品”节点：

navigation: { nodes: () => [ { pathSegment: \'home\', label: \'Home\', icon: \'home\', viewUrl: \'/app.html#/home\', children: [{ pathSegment: \'products\', label: \'Products\', icon: \'list\', viewUrl: \'/app.html#/products\' }] } ] } Step 12: Add "Product Detail" view to Luigi app

在此步骤中，您将向应用程序添加 ProductDetail.jsx 视图。 您将能够通过 Luigi 动态参数显示每个产品的详细信息，在本例中名为 :id。

文件 luigi-config.js 的内容为：

/* eslint-disable no-undef */ Luigi.setConfig({ navigation: { nodes: () => [ { pathSegment: \'home\', label: \'Home\', icon: \'home\', viewUrl: \'/app.html#/home\', children: [{ pathSegment: \'products\', label: \'Products\', icon: \'list\', viewUrl: \'/app.html#/products\' }] }, { pathSegment: \'products\', label: \'Products\', icon: \'list\', viewUrl: \'/app.html#/products\', keepSelectedForChildren: true, children: [{ pathSegment: \':id\', viewUrl: \'/app.html#/productDetail/:id\' }] } ] }, settings: { header: { title: \'Luigi Application\', logo: \'/logo.png\' }, responsiveNavigation: \'simpleMobileOnly\' } } ); Step 13: Use Luigi link manager for routing

在这一步中，我们将使用 Luigi 来提供微前端的路由，而不是使用 React。 Luigi Client 的 linkManager 功能是导航到每个产品的 id 页面的最简单方法。

更多Jerry的原创文章，尽在："汪子熙":