微前端是庞大前端项目的一种有效架构，简单【本文受版权保护】本文作者：唐霜，转载请注明出处。讲就是将复杂的应用拆分为各个部分分而治之【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。，伴随着微前端架构的运用，其基础建设目前【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】并不完善，我想当下仍有两个问题未解决，一【本文受版权保护】原创内容，盗版必究。个是依赖共享尚未有非常好的方案，这里的依【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】赖不局限于node_modules中的依【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】赖，也包括单文件，如果将来能做到完全的基【转载请注明来源】本文版权归作者所有，未经授权不得转载。于浏览器的import和http2的加持未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】，或许就可以完美且低成本的解决依赖共享问【本文受版权保护】未经授权，禁止复制转载。题，二是路由尚无一个完美的方案，当下的路未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net由方案多是通过代理来实现映射，包括我在mfy未经授权，禁止复制转载。框架中也是如此实现，但这种方案是很低效的本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。，需要集成者花费比较多的经历去处理映射关未经授权，禁止复制转载。【版权所有，侵权必究】系。基于我在自己项目中的实践，这篇文章将转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】阐述一种去中心化的嵌套路由设计，可以让微转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net前端架构中各个微应用拥有自己独立的路由的【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】同时，基座应用可以无缝接入该微应用。

【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【本文首发于唐霜的博客】

传统前端路由【转载请注明来源】

本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【本文受版权保护】【转载请注明来源】

传统前端路由的特征是，由应用顶层统一配置【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。路由，或者类似React-Router可【关注微信公众号：wwwtangshuangnet】【作者：唐霜】以做到分区块配置路由，但是它们都是中心化本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。管理，也就是在整个应用中导航只有一套逻辑本文版权归作者所有，未经授权不得转载。【转载请注明来源】，因此，无论是在应用最顶层，还是组件最底未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。层，在导航的时候都是直接导航到目标路径，【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。从而展示对应界面。

原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

但是在微前端架构下，这种操作逻辑是不成立【作者：唐霜】原创内容，盗版必究。的，因为对于微应用而言，它不知道基座应用【本文受版权保护】原创内容，盗版必究。将集成哪些其他微应用，也不知道其他微应用未经授权，禁止复制转载。【本文受版权保护】将定义哪些路由。于此同时，单一微应用的路转载请注明出处：www.tangshuang.net【未经授权禁止转载】由，不能和其他微应用的路由有冲突。这也就著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net意味着，在微前端架构下，既不可能建立一套原创内容，盗版必究。【版权所有，侵权必究】统一的中心化路由，也不可能让微应用直接接【作者：唐霜】【本文受版权保护】管url的跳转控制。

未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【作者：唐霜】本文作者：唐霜，转载请注明出处。

Remix路由系统【版权所有，侵权必究】

【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】

Remix内置支持了一种嵌套路由系统，这原创内容，盗版必究。原创内容，盗版必究。种嵌套路由模式，给了微前端架构更多遐想空【作者：唐霜】【作者：唐霜】间，因为微前端模式下你不知道每个微应用会转载请注明出处：www.tangshuang.net原创内容，盗版必究。出现什么样的路由设计，基于嵌套路由，基座转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】应用加载微应用之后，可以让微应用自己衍生本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】自己的路由出来，而不需要担心和已有路由产【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。生冲突。

【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

那么到底什么是嵌套路由呢？简单讲我们的页转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。面都是一块一块的，每一块都嵌套在另外一个转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】模块内，最顶层的就是整个应用。这种嵌套结【本文首发于唐霜的博客】【版权所有，侵权必究】构，让我们可以通过url中的路径进行区分【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net，如下图，invoices嵌套在sale本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。s中，因此，在url中可以很好的安排，而转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。如果切换下图中的tab到Subscrip著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】tions，那么url中将用subscr【未经授权禁止转载】【原创内容，转载请注明出处】iptions替代invoices，就是【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】这么简单。对于当前的invoices而言【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】，其内部又通过url中后面的:id值来拉本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。取和展示对应的个体详情信息。

【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【本文受版权保护】

微前端架构与这种模式是匹配的，当url发【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】生切换的时候，基座应用需要切换到某个微应【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。用进行加载，而当该微应用加载完毕之后，需【原创不易，请尊重版权】【作者：唐霜】要根据自己路由的规定来展示对应的内容。

【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】

这种嵌套路由的模式，让我们的微前端架构设【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。计更加有意义，实施起来也更合理，避免了以未经授权，禁止复制转载。【转载请注明来源】往接入一个应用时，需要通过复杂手段控制其原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。路由展示逻辑的问题。当然，要实现该路由模【原创不易，请尊重版权】【作者：唐霜】式，需要强大的设计和编程能力。接下来，我转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net将讲解我在项目中的做法。

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

微前端嵌套路由本文作者：唐霜，转载请注明出处。

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】

微前端是一种应用架构模式，它有两种设计方【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】案，一种是支持跨技术栈，一种是采用相同技【原创不易，请尊重版权】【未经授权禁止转载】术栈。我们项目中采用了react技术栈，【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net在不同端使用不同react渲染器，在re本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】act native中，我们仍然可以实现转载请注明出处：www.tangshuang.net【转载请注明来源】微前端架构。

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

相同技术栈下实现嵌套路由难道小一些，只需【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net要写一套代码，而如果支持跨技术栈，则需要转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】写一个底层的驱动器，同时为不同技术栈写可【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。以实现被引用的路由框架。现在，让我们把注著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。意力集中在react中，看看react中【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】是如何实现该设计。

【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

可嵌套的Provider【版权所有，侵权必究】

原创内容，盗版必究。【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【本文首发于唐霜的博客】

在React中，context.Prov【转载请注明来源】【关注微信公众号：wwwtangshuangnet】ider有一个特性，可以进行嵌套，而co【作者：唐霜】【作者：唐霜】ntext.Consumer总是消费离它【原创内容，转载请注明出处】原创内容，盗版必究。最近的Provider提供的值。例如：

【转载请注明来源】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

<Provider value={1}>
  <div>
    <Provider value={2}>
      <SomePageComponent />
     </Provider>
  </div>
</Provider>

上面我们有两个Provider，且是嵌套著作权归作者所有，禁止商业用途转载。【作者：唐霜】状态。此时，SomePageCompon【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ent中如果进行context的消费，那【本文首发于唐霜的博客】【转载请注明来源】么拿到的值只会是2而不会是1，不过Som本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ePageComponent会被放在哪一本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net个Provider内呢？在编程过程中并不【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。确定，因此，它在消费时得到的值也不确定。

【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

基于这样的特性，我们就可以设计嵌套模式了【本文受版权保护】未经授权，禁止复制转载。。让我们来看下最基础的代码：

【转载请注明来源】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

function Route(props) {
    const { path, children } = props;
    const { uri, ...others } = useContext(RouterContext);
    const nextUri = `${uri}/${path}`;
    const { Provider } = RouterContext;
    return (
        <Provider value={{ ...others, uri: nextUri }}>{children}</Provider>
    );
}

这个设计非常巧妙，就是在Route组件中【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net，既使用useContext读取上一个P著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。rovider提供的值，同时自己又使用P本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。rovider为下文提供新的值，这样，在本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。下文中所拿到的uri就是Route所规定本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。且嵌套在上一层中的地址。

【作者：唐霜】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

这就是在react中实现嵌套路由的最基础【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。原理。

【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

路由的识别转载请注明出处：www.tangshuang.net

【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】

通过对url的匹配，我们可以识别当前的u原创内容，盗版必究。【未经授权禁止转载】rl对应的是哪个路由。但是，由于我们的路未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】由系统是嵌套路由系统，所以，当url被我【转载请注明来源】著作权归作者所有，禁止商业用途转载。们读取时，我们是不能立即进行分段的，而是【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】要持续的递归的进行路由的匹配。这就像拨洋【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。葱一样，只能拨掉外面的，才能拨里面的。

未经授权，禁止复制转载。【本文受版权保护】【版权所有，侵权必究】

要做到这个，我们就必须在嵌套路由的基础上【原创不易，请尊重版权】【原创内容，转载请注明出处】，在程序内部维护一个树状的状态，基于这个本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。树状结构，来匹配url，从而能够准确的一【作者：唐霜】著作权归作者所有，禁止商业用途转载。层一层的让我们的路由所对应的界面展现出来【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net。

【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】【转载请注明来源】本文版权归作者所有，未经授权不得转载。【本文受版权保护】

效果【转载请注明来源】

【本文受版权保护】【版权所有，侵权必究】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

基于这一设计，当我们采用微前端架构时，我转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net们可以做到让微应用真正独立于具体基座应用本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】中。例如，现在我们有两个门户站点A和B，【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net同时，我们有微应用a, b, c, d，未经授权，禁止复制转载。【版权所有，侵权必究】其中A使用了a, b, c三个微应用，而【版权所有，侵权必究】【作者：唐霜】B使用了a, c, d三个微应用。

未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。

对于A站点而言，它的访问域名为a.com【版权所有，侵权必究】【转载请注明来源】，B为b.com，当我们访问a, b, 【未经授权禁止转载】未经授权，禁止复制转载。c, d时，它们的路径分别时/a, /b【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。, /c, /d，所以，我们可以通过a.【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】com/a, b.com/c等访问对应微转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。应用。

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【未经授权禁止转载】【本文首发于唐霜的博客】

但是，在具体的微应用中，它有自己的路由规【转载请注明来源】【版权所有，侵权必究】定，例如a里面，它有list, deta转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。il, create, edit等路由，著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。因此，访问它们的路径就是 /a/list【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。, /a/detail/:id, /a/转载请注明出处：www.tangshuang.net【本文受版权保护】create, /a/edit/:id。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。很明显，无论是在A中还是B中，这些路径都【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net应该是可以被访问的。不过，现在发生了一件【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net令人难受的事，在A站点中，它原本集成了另原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。外一个x微应用，它已经占用了/a这个ur【原创内容，转载请注明出处】【原创内容，转载请注明出处】i。所以，我们现在不得不使用/aa来访问转载请注明出处：www.tangshuang.net【本文受版权保护】原来的a应用，此时，如何访问list, 转载请注明出处：www.tangshuang.net原创内容，盗版必究。detail, create和edit呢【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。？

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【本文受版权保护】

现在，我们采用嵌套路由系统。我们在编写a【作者：唐霜】【版权所有，侵权必究】, b, c, d这四个微应用的时候，我未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。们根本不考虑我们是在那个应用中被使用，因原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】此，我们在a中如下定义自己的路由：

原创内容，盗版必究。【本文首发于唐霜的博客】【版权所有，侵权必究】【版权所有，侵权必究】

const router = new Router({
  routes: [
    {
      path: 'list',
      component: List,
    },
    {
      path: 'detail/:id',
      component: Detail,
    },
    {
      path: 'create',
      component: Create,
    },
    {
      path: 'edit/:id',
      component: Edit,
    },
  ],
});

对于a微应用而言，这些路径都是自己内部管【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。理，它不在乎外部将会如何使用自己，它只管本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。定义自己的路由。由于a定义自己的路由，因【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。此，我们可以独立运行a，从而完成某个微应【本文受版权保护】【未经授权禁止转载】用的测试、部署等。

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】

对于A这个站点而言，它要使用a，它将这样【转载请注明来源】【关注微信公众号：wwwtangshuangnet】使用它：

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】

const routerOfPortalA = new Router({
  routes: [
    {
      path: 'aa',
      component: a, // a这个微应用
    },
  ],
})

此时，当A起来之后，我们就可以通a.co本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netm/aa/detail/123访问到a的【转载请注明来源】转载请注明出处：www.tangshuang.net详情页。

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

当然，和模块系统的结合，微应用还可以嵌套【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。其他微应用，例如在b中，我们还直接使用了转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】d微应用。此时，我们访问/b/detai未经授权，禁止复制转载。【版权所有，侵权必究】l/123/d/edit/456就代表着本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。我们在访问b微应用的详情界面的时候，打开本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net了被内置其中的d的编辑界面。

未经授权，禁止复制转载。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

结语【未经授权禁止转载】

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【本文受版权保护】

过去两年里，我在项目中实践了微前端架构，本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net这种架构对部分人来讲会觉得麻烦，甚至在我【本文首发于唐霜的博客】【本文受版权保护】主导的架构下，悄悄用传统的思维去写代码，著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】导致出现了一些逆向依赖，但是大体上，基于转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net这一架构的设计，让项目在功能的解耦上更优本文作者：唐霜，转载请注明出处。【作者：唐霜】秀。对于开发而言，功能模块也好，或者被称【作者：唐霜】【版权所有】唐霜 www.tangshuang.net为微应用也好，都是完全可以独立，基于这种【转载请注明来源】【本文受版权保护】独立，就可以避免很多相互干扰的问题。相信原创内容，盗版必究。【版权所有，侵权必究】除了我的项目，其他很多人的项目，在一定的【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】规模之后，都会有类似的理念，此时，不妨考本文版权归作者所有，未经授权不得转载。【转载请注明来源】虑本文所提出的嵌套路由模式来解决这种微分【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net化的架构实现。

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。未经授权，禁止复制转载。【未经授权禁止转载】

2022-09-21 12453