Gatsby路由参数丢失问题：如何保留查询参数与动态路径

问题原因 #

Gatsby的路由基于@reach/router实现，默认情况下，创建页面时的path字段会作为精确匹配规则。当访问的URL包含额外查询参数（?xxx）或动态子路径（/xxx）时，若未配置对应匹配规则，Gatsby会判定该URL与定义的页面路径不匹配，触发重定向到精确的path地址，导致参数被自动移除。

另外，在静态生成（SSG）模式下，Gatsby仅会生成path对应的静态HTML文件。当访问带参数的URL时，托管服务器（如Netlify、Vercel）会返回对应静态页面，但客户端路由初始化时会遵循精确匹配规则重写URL，进一步导致参数丢失。

解决方案：配置matchPath #

你的猜测方向正确，通过设置matchPath可以解决该问题，针对不同场景选择对应规则：

1. 保留查询参数（如https://page1?someParam=param） #

在createPage中添加matchPath: "${localePrefix}/${slug}?*"，该规则会匹配所有以目标路径开头、带任意查询参数的URL：

createPage({
  path: `${localePrefix}/${slug}`,
  component: PageTemplate,
  context: {
    ...context,
    localizedPaths,
  },
  matchPath: `${localePrefix}/${slug}?*`
})

2. 支持动态子路径（如https://page1/param） #

如果需要匹配动态子路径，使用matchPath: "${localePrefix}/${slug}/*"，该规则会匹配所有以目标路径开头的子路径：

createPage({
  path: `${localePrefix}/${slug}`,
  component: PageTemplate,
  context: {
    ...context,
    localizedPaths,
  },
  matchPath: `${localePrefix}/${slug}/*`
})

3. 同时支持查询参数和动态子路径 #

若需兼容两种场景，可结合规则（部分托管服务可能需额外配置）：

matchPath: `${localePrefix}/${slug}/*?*`

验证方法 #

修改代码后重新构建项目，访问带参数的URL，检查地址栏是否保留参数。同时可在页面组件中通过useLocation钩子获取参数：

import { useLocation } from "@reach/router";

const PageTemplate = () => {
  const location = useLocation();
  // 打印查询参数
  console.log(location.search);
  // 打印完整路径
  console.log(location.pathname);
  return <div>...</div>;
};

内容的提问来源于stack exchange，提问作者DevOverflow