NextJs 多区域共享标头 [英] NextJs Multi Zones Shared Header

问题描述

我有 2 个应用程序 admin-shell 和 delivery-management，我在 NextJs 中使用 Multi Zones 来处理.

I have 2 apps admin-shell and delivery-management and i am using Multi Zones to handle that in NextJs.

这两个应用程序都使用带有导航链接的共享标题，但我在从一个区域导航到另一个区域时遇到了问题.

Both these applications use a shared header with navigation links but i'm facing problem navigating from one zone to other zone.

Admin-Shell 使用 next.config.js 文件在端口 4201 上运行

Admin-Shell running on port 4201 with next.config.js file

module.exports = {
basePath: '/main',
rewrites: async() => {
    return [{
            source: '/delivery-management',
            destination: `http://localhost:4202/delivery-management`,
            basePath: false,
        },
        {
            source: '/delivery-management/:path*',
            destination: `http://localhost:4202/delivery-management/:path*`,
            basePath: false,
        },
    ];
},
};

交付管理在端口 4202 上运行，带有 next.config.js 文件

Delivery-Management running on port 4202 with next.config.js file

module.exports = {
basePath: '/delivery-management',
rewrites: async() => {
    return [{
            source: '/main',
            destination: `http://localhost:4201/main`,
            basePath: true,
        },
        {
            source: '/main',
            destination: `http://localhost:4201/main/:path*`,
            basePath: true,
        },
    ];
},
};

标题是一个单独的共享模块，带有导航栏.我遇到了相对链接的问题.考虑以下链接:

The header is a separate shared module with navigation bar. I'm having a problem with relative links. Consider following links:

1-/main/main-dashboard

1- /main/main-dashboard

2-/delivery-management

2- /delivery-management

当我在 Delivery-Management 应用程序中时，它会在 basePath 中附加这样的链接

When i'm in Delivery-Management application it appends the basePath with links like this

/delivery-management/main/main-dashboard"由于该页面不加载.它应该像/main/main-dashboard"一样绝对.

"/delivery-management/main/main-dashboard" due to which the page doesnt load. It should be absolute like "/main/main-dashboard".

对此有什么可能的解决方案?如何在 Next/Link 中使用绝对 url 而不是相对 url.

What could be the possible solution for this? How can i use absolute urls instead of relative urls with Next/Link.

推荐答案

其中一个基本路径必须是 /.考虑到您的代码，我认为您应该将 /main 更改为 / 并且应用程序应该可以正常工作.

One of the base paths must be /. Considering your code, I think you should change your /main to just / and the application should work just fine.

这篇关于NextJs 多区域共享标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！