javascript - NextJs 多区域共享 header

Question

我有 2 个应用程序 管理员外壳 和 交付管理我正在使用 Multi Zones 来处理 NextJs 中的问题。
这两个应用程序都使用带有导航链接的共享标题，但我在从一个区域导航到另一个区域时遇到了问题。
管理员外壳 使用 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/main-dashboard
2-/交​​付管理
当我在 配送管理应用程序它会在 basePath 中附加这样的链接
“/交付管理/主/主仪表板”
由于该页面不加载。它应该像“/main/main-dashboard”一样是绝对的。
可能的解决方案是什么？如何在 Next/Link 中使用绝对 url 而不是相对 url。

Answer 1

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