NextJs 多区域共享标头

Question

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

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

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

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

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/main-dashboard

2- /delivery-management

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

"/delivery-management/main/main-dashboard" 由于该页面不加载。它应该像“/main/main-dashboard”一样是绝对的。

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

Answer 1

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