2

我在使用重写和查询参数时遇到问题。我将在下面进一步描述。如果我在解释过程中的任何时候失去了你，请随时要求澄清。

预期结果

我想要实现的是本地化下一个/链接并传递一个查询参数来填写 url 的动态部分。

设置

我将我的设置拆分为几个文件，pathnames.js其中包含所有路径和翻译。（不会只显示整个文件的必要部分）

// The predefined consts for the pathnames
export const pathnames = {
  STOREFINDER: 'stores',
  STOREFINDER_DETAIL: '/stores/[id]',
};

// The localized part of the pathnames
export const localizedPathnames = {
  // This works
  [pathnames.STOREFINDER]: {
    nl: '/winkels',
    fr: '/magasins',
  },
  // This works half (further explanation below)
  [pathnames.STOREFINDER_DETAIL]: {
    nl: '/winkels/[id]',
    fr: '/magasins/[id]',
  },
};

然后是next.config.js我定义重写的地方。（不会只显示整个文件的必要部分）

async rewrites() {
  return [{
      source: '/winkels',
      destination: '/stores',
   },
   {
      source: '/magasins',
      destination: '/stores',
   },
   {
      source: '/winkels/:id',
      destination: '/stores/:id',
   },
   {
      source: '/magasins/:id',
      destination: '/stores/:id',
   },  
]}

这就是我制作本地化链接的方式


<Link
    href={getLocalizedRoute(pathnames.STOREFINDER_DETAIL, locale, {
        query: { id: name },
    })}
    passHref
>
    <Button className="store-info-card-cta" color="secondary">
        {formatMessage({ id: 'store_finder_search_result_details' })}
    </Button>
</Link>

getLocalizedRoute函数返回示例

{
  "pathname": "/nl/winkels/[id]",
  "query": {
    "id": "lommel"
  }
}

当前结果

好了，就是这么设置。

  1. 现在，每当您按下链接时，下一步将首先抛出一个错误，您可以在下面的屏幕截图中看到该错误。 路由事件开始前显示的错误消息

  2. 然后它将开始“重新加载”浏览器并继续路由到正确的路径而不会出现问题。 重新加载图像示例

  3. 在生产上，这可以正常工作，但您仍然会看到浏览器重新加载，这并不理想。

  4. 唯一有效的是路由没有重写和本地化，只是路由到i.e.: /shops/lommel. 这又是不理想的，因为客户依赖于本地化的网址。

<Link
    href={{
        pathname: `/${locale}/stores/[id]`,
        query: { id: name },
    }}
    passHref
>
    <Button className="store-info-card-cta" color="secondary">
        {formatMessage({ id: 'store_finder_search_result_details' })}
    </Button>
</Link>
4

0 回答 0