NextJS - 多区域之间的问题路由答案

【问题标题】：NextJS - Issue routing between Multi ZonesNextJS - 多区域之间的问题路由
【发布时间】：2022-11-02 18:53:56
【问题描述】：

我在两个应用程序之间设置了多区域：

首页应用
博客应用

当我在博客应用程序的页面上并尝试使用Link 或router.push("/") 链接回主页应用程序时，它会将我带到博客应用程序的基本路径。

在 next.config.js 中，我将其设置如下：

/** @type {import('next').NextConfig} */

const withTM = require('next-transpile-modules')(['@workflow/shared-core']);

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    externalDir: true
  },
  basePath: '/blog',
  rewrites: async () => {
    return [
      {
        source: "/",
        destination: "http://localhost:5001",
        basePath: false
      }
    ]
  }
}

module.exports = withTM(nextConfig)

我的理解是，当在 basePath 设置为 false 的情况下设置重写时，它将完全回退目标属性中的 URL。

有任何想法吗？

【问题讨论】：

标签： next.js

【解决方案1】：

不幸的是，您不能使用下一个路由器在多个区域之间跳转。每个新的多区域基本上都是一个新的下一个应用程序，具有自己的路由器实例，因此对于您的博客应用程序，基本路由将是 /blog/。要跳转到另一个应用程序，您必须使用带有 href 属性的 <a href="#"> 标记或手动更改 window.location.href = .... 指向您想要的路线。例如，如果基本路径是“/account”并且您想从“/blog”导航到该路径，则必须执行window.location.href = '/account'。

【讨论】：