NextJs 多区域共享标头

Question

我有 2 个应用程序管理外壳和交付管理，我正在使用多区域来处理 NextJs 中的问题。

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

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

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,
        },
    ];
},
};

使用 next.config.js 文件在端口 4202 上运行的交付管理

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,
        },
    ];
},
};

标题是一个带有导航栏的单独共享模块。我的相对链接有问题。考虑以下链接：

1-/main/主仪表板

2-/交货管理

当我在交付管理应用程序中时，它会在基本路径上附加这样的链接

“/delivery-management/main/main-dashboard”，因此页面无法加载。它应该是绝对的，如“/main/main-dashboard”。

可能的解决方案是什么？我如何在 Next/Link 中使用绝对 url 而不是相对 url。

Answer 1

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