时间戳

首页 > 解决方案 > Gatsby 动态路由在 gh-pages 部署时中断

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

问题描述

我将我的第一个 Gatsby 项目部署到 github 页面：
repo：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一切正常（/team/:teamName/app//app/

打开/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，但没有运气。

pathPrefix我确实有gatsby-config.json：（这里有完整的配置）

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

我使用以下纱线脚本进行部署：（此处为完整的 package.json）

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

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

标签： deploymentgatsbygithub-pagesreach-routerdynamic-routing

解决方案

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

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

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

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

return browser && <NotFoundPage />;

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

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

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

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

推荐阅读