如何在 JavaScript 中转换多个语言环境的路由映射？

Question

我正在尝试将带有

source

和

destination

的路线对象数组转换为更复杂的结构，该结构按路径和区域设置组织路线。然而，存在一个问题，某些路径（如

/casino-ca

）在应有的时候没有被完全映射。这是问题的更详细分解。

当前路由数组

const routes = [
  { source: '/en/casino', destination: '/en/casino' },
  { source: '/en/casino/:slug', destination: '/en/casino/:slug' },
  { source: '/en-ca/casino-ca', destination: '/en/casino' },
  { source: '/en-ca/casino-ca/:slug', destination: '/en/casino/:slug' },
  { source: '/en/dashboard', destination: '/en/dashboard' },
  { source: '/en-ca/dashboard-ca', destination: '/en/dashboard' },
  { source: '/en/home', destination: '/en/home' },
  { source: '/en-ca/home', destination: '/en/home' },
  { source: '/en/sports', destination: '/en/sports' },
  { source: '/en-ca/sports', destination: '/en/sports' },
  { source: '/en/shop', destination: '/en/shop' },
  { source: '/en-ca/shop', destination: '/en/shop' },
  { source: '/en/leaderboard', destination: '/en/leaderboard' },
  { source: '/en-ca/leaderboard', destination: '/en/leaderboard' }
];

目标结构（目标）

const routes = [
  {
    '/casino': {
      'en': '/en/casino',
      'en-ca': '/en-ca/casino-ca',
    },
    "/casino-ca": {
      "en": "/en/casino",
      "en-ca": "/en-ca/casino-ca"
    },
    '/casino/:slug': {
      'en': '/en/casino/:slug',
      'en-ca': '/en-ca/casino-ca/:slug',
    },
    '/casino-ca/:slug': {
      'en': '/en/casino/:slug',
      'en-ca': '/en-ca/casino-ca/:slug',
    },
    '/dashboard': {
      'en': '/en/dashboard',
      'en-ca': '/en-ca/dashboard-ca',
    },
    '/dashboard-ca': {
      'en': '/en/dashboard',
      'en-ca': '/en-ca/dashboard-ca',
    },
    '/home': {
      'en': '/en/home',
      'en-ca': '/en-ca/home',
    },
    '/home-ca': {
      'en': '/en/home',
      'en-ca': '/en-ca/home',
    },
    '/sports': {
      'en': '/en/sports',
      'en-ca': '/en-ca/sports',
    },
    '/shop': {
      'en': '/en/shop',
      'en-ca': '/en-ca/shop',
    },
    '/leaderboard': {
      'en': '/en/leaderboard',
      'en-ca': '/en-ca/leaderboard',
    }
  }
];

尝试的代码

我编写了一个函数来提取唯一路径，另一个函数来转换路线，但最终输出中缺少一些路径，例如

/casino-ca

。例如，两个语言环境的

/casino-ca

映射未完全设置：

• 应该是：

  "/casino-ca": {
    "en": "/en/casino",
    "en-ca": "/en-ca/casino-ca"
  }
  

代码：

interface Route {
  source: string;
  destination: string;
}

const locales = ['en', 'en-ca'];

const extractUniquePaths = (routes: Route[]): string[] => {
  // Extract paths without locale and get unique values
  const uniquePaths = [
    ...new Set(routes.map(route => route.source.split('/').slice(2).join('/'))),
  ];
  console.log(uniquePaths);
  return uniquePaths;
};

const uniquePaths = extractUniquePaths(routes);

const transformRoutesByLocale = (
  routes: Route[],
  locales: string[]
): Record<string, Record<string, string>> => {
  const result: Record<string, Record<string, string>> = {};

  uniquePaths.forEach(path => {
    result[`/${path}`] = {};

    locales.forEach(locale => {
      const matchingRoute = routes.find(
        route =>
          route.source.startsWith(`/${locale}/`) && route.source.endsWith(path)
      );
      if (matchingRoute) {
        result[`/${path}`][locale] = matchingRoute.destination;
      }
    });
  });

  return result;
};

const transformedRoutes = transformRoutesByLocale(routes, locales);
console.log(transformedRoutes, 'transformed routes');

问题

• 当前代码可以工作，但对于像

  /casino-ca

  这样的路径，转换缺少

  en

  区域设置的映射部分。
• 例如，对于

  /casino-ca

  语言环境，

  /en/casino

  应映射到

  en

  ，但输出中缺少这一点。
• 如何更新我的代码以确保每个路径都正确映射到

  en

  和

  en-ca

  语言环境，包括仅出现在一种语言环境中但也应在另一种语言环境中镜像的路径？

具体问题

像

/casino-ca

这样的路径应该具有两种映射：

"/casino-ca": {
  "en": "/en/casino",
  "en-ca": "/en-ca/casino-ca"
}

但是，当前代码不会生成此结构，因为它不检查反向映射（从

en-ca

到

en

，反之亦然）。

问题

如何将我的代码修改为：

1. 确保所有路径都完全映射到两个语言环境（

   en

   和

   en-ca

   ），包括

   /casino-ca

   ？
等情况
2. 正确镜像区域设置之间的路径（例如，将

   /en-ca/casino-ca

   映射到

   /en/casino

   区域设置的

   en

   ）？

这是我的代码游乐场的链接，您可以在其中查看正在运行的代码：
代码游乐场

---

Answer 1

您似乎没有将

destination

用于任何用途。

由于重复，这很棘手（例如 /casino/ 和 /casino-ca/ 的内容相同）。 对我来说这有点奇怪，但没关系，这是一种方法：

const routes = [
  { source: '/en/casino', destination: '/en/casino' },
  { source: '/en/casino/:slug', destination: '/en/casino/:slug' },
  { source: '/en-ca/casino-ca', destination: '/en/casino' },
  { source: '/en-ca/casino-ca/:slug', destination: '/en/casino/:slug' },
  { source: '/en/dashboard', destination: '/en/dashboard' },
  { source: '/en-ca/dashboard-ca', destination: '/en/dashboard' },
  { source: '/en/home', destination: '/en/home' },
  { source: '/en-ca/home', destination: '/en/home' },
  { source: '/en/sports', destination: '/en/sports' },
  { source: '/en-ca/sports', destination: '/en/sports' },
  { source: '/en/shop', destination: '/en/shop' },
  { source: '/en-ca/shop', destination: '/en/shop' },
  { source: '/en/leaderboard', destination: '/en/leaderboard' },
  { source: '/en-ca/leaderboard', destination: '/en/leaderboard' }
];

const target = routes.reduce((acc, {source}) => {
  const [,locale,page,...rest] = source.split("/");
  
  const frag = "/" + page + "/" + rest.join("/");
  const otherFrag = "/" + (page.endsWith("-ca") ? page.slice(0, -3) : page + "-ca") + "/" + rest.join("/");
  
  if (!acc[frag]) acc[frag] = {};
  acc[frag][locale] = source;
  
  if (!acc[otherFrag]) acc[otherFrag] = {};
  acc[otherFrag][locale] = source;

  return acc;
}, {});

console.log(target);