Gatsby配置createPage的path与matchPath后仅matchPath生效如何解决

1. path与matchPath的渲染逻辑 #

• Gatsby createPage 接口的 path 是静态精准匹配路由，matchPath 是用于客户端路由的动态匹配规则，二者默认不会自动复用渲染逻辑，你遇到的情况符合预期。
• 你当前仅在 Reach Router 中注册了 slugWithParameters 对应的动态路由规则，没有对静态的 slug 路径做路由匹配配置，所以只有带参数的动态路径可以命中PrivateRoute渲染组件，静态路径无对应路由规则自然不会返回内容。

2. 兼容方案 #

你确实需要对原始静态path做兼容支持，有两种常用实现方式：

方案1：新增静态路径路由项 #

直接在Router中为静态slug新增一条匹配规则即可：

<Router>
    <PrivateRoute page={Page} path={slugWithParameters} {...props} />
    <!-- 新增静态路径匹配 -->
    <PrivateRoute page={Page} path={slug} {...props} />
</Router>

方案2：调整路由规则适配两种路径 #

可以给动态参数添加?标记为可选，让同一条路由规则同时适配带/不带id参数的两种路径，无需写多条路由：

// 修改slugWithParameters的生成逻辑，给id参数加可选标识
const slugWithParameters = slug === "/" ? "/:id?" : `/:id?${slug}`

调整后原来的/:id/about会变成/:id?/about，可以同时匹配/about和/xxx/about两种路径。

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