Question

我将第一个Gatsby项目部署到github页面：
回购：https://github.com/michal-kurz/stfuandclick
gh页：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作为应用程序的切入点（转到{{ 1}}，然后单击蓝色按钮可以正常使用。

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

一旦部署了应用，似乎/app/并没有正确执行它的工作。我最初怀疑它根本不起作用，但是显然不是这样，因为注释掉所有代码会使应用程序进一步中断（团队页面在通过/app/的链接访问时突然中断，甚至收支平衡）。 / p>

我尝试在生产版本中将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：（full config here）

pathPrefix

然后使用以下纱线脚本进行部署：（full package.json here）

gatsby-config.json

我该怎么做才能使路由正常工作？

Answer 1

在研究vickywords时，我遇到了类似的问题。我将网站托管在Vercel上。基本上，服务器尝试通过路径dynamic-route/param/查找文档，并且它不知道动态路由。因此它会引发404错误。

要解决此问题，我必须对源代码进行2次更改。

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

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

return browser && <NotFoundPage />;

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

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

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

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

gh页部署后，盖茨比动态路由中断

1 个答案: