微前端设计与实现

108

｜

第

5

章

<h1>

Shop

</h1>

<Switch>

<Route exact path={`${path}`} component={Home}/>

<Route exact path={`${path}/product/:productId`} component={Details}/>

</Switch>

</div>

)

}

// 后置代码

使用

React Router

库，我们首先访问的是

URL

深度的第一级。然后，当用户选择特定产品

时，基于产品

ID

的变化

，

URL

深度级别会不断地递增。从第二级开始，结构和管理通常

会在微前端内部完全实现，这样，每个子域可以自主发展，在优化功能的时候无须与其他

团队协调。这还可以防止不同的域创建重复的第一级

URL

，因为只有一个团队负责全局路

由。当实现详情页面时，我们可以使用产品

ID

向

API

请求用于展示的数据：

// 前置代码

const Details = () => {

// 通过URL获取商品ID

const {productId} = useParams()

// 添加一些逻辑从而通过API获取商品详情

return(

<div>

// 显示商品ID

{`Details page, product id: ${productId}`}

<Link to="/shop">All products</Link>

</div>

)

}

// 后置代码

通过这种方式，我们可以轻松地设计代码库，应对未来可能出现的拆分 ...