Gatsby 动态路由在 gh-pages 部署时中断

Question

我将我的第一个 Gatsby 项目部署到 github 页面：
回购：https://github.com/michal-kurz/stfuandclick
gh-pages：https://michal-kurz.github.io/stfuandclick/app/（从gh-pages 分支生成）

它有一页src/pages/app.tsx，它使用Reach Router进行动态路由。

// app.tsx
const App = () => (
  <>
    <GlobalStyles />
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <Router>
          <Homepage path={`${BASE_URL}/app/`} />
          <Team path={`${BASE_URL}/app/team/:teamName/`} />
        </Router>
      </ThemeProvider>
    </Provider>
  </>
)

// gatsby-node.js
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/app/)) {
    page.matchPath = '/app/*'
    createPage(page)
  }
}

注意：BASE_URL 等于生产环境版本中的/stfuandclick 和其他环境中的''

在开发模式（gatsby develop）下一切正常，但在部署版本上，如果不使用/app/作为应用程序的入口点（转到/app/并单击蓝色按钮），则无法访问/team/:teamName工作正常）。

直接打开 /team/:teamName 链接会导致 404（除非之前通过 /app/ 访问它缓存，但随后 ctrl + f5 会再次导致 404）。

似乎gatsby.node.js 在部署应用程序后无法正常工作。我最初怀疑它根本不起作用，但显然情况并非如此，因为注释所有代码会进一步破坏应用程序（团队页面在通过来自/app 的链接访问时突然中断）。

我尝试在生产版本中为 gatsby-node.js 中的路径添加前缀 BASE_URL，如下所示：

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/stfuandclick\/app/)) {
    page.matchPath = '/stfuandclick/app/*'
    createPage(page)
  }
}

并且还分别为gatsby-node.js 中的两个路径中的每一个添加前缀，但没有运气。

我的gatsby-config.json 中有pathPrefix: (full config here)

module.exports = {
  pathPrefix: '/stfuandclick',
  // ...
}

我使用以下纱线脚本进行部署：(full package.json here)

"deploy": "gatsby build --prefix-paths && gh-pages -d public"

我可以做些什么来使我的路由工作？

Answer 1

我在处理 vickywords 时遇到了类似的问题。我在 Vercel 上托管了我的网站。基本上，服务器试图通过路径dynamic-route/param/ 定位文档并且它不知道动态路由。所以它会抛出 404 错误。

要解决这个问题，我必须对源代码进行 2 处更改。

1. 在 404.js 文件中，我进行了以下更改以消除 404 闪烁。就我而言，我在浏览器控制台中看到了 404 错误。 source

const browser = typeof window !== "undefined" && window;

return browser && <NotFoundPage />;

1. 在 vercel.json 文件中，我必须向根页面添加重定向，如下所示。

{ "rewrites": [{ "source": "/word-finder/(.*)", "destination": "/word-finder" }] }

我注意到一个问题，word-finder 页面是我的动态路由的根页面，其中包含一些文本。当用户搜索某些内容时，我只需使用将呈现动态内容的参数重定向到同一页面。在看到实际内容之前，我看到我的根页面闪烁着文字。 我相信这是由于 URL 重定向。

注意： 如果有人在使用 Netlify，他们可以在 _redirect 文件中添加相同的行为。确保将其放在static 文件夹中，以便在部署后将其复制。