Gatsby 仅客户端路径在生产中的浏览器中首次加载时显示 404

Question

我正在 gatsby-node.js 中创建我的动态页面以创建我的客户端路径。所有页面在本地主机上都运行良好，页面也在生产中显示所需的数据。但是，浏览器在第一次加载时仍将页面显示为 404。我以这种方式在 gatsby-node.js 中尝试过：

const path = require ("path")
exports.omCreatePage = async ({ page, actions }) => {
    const { createPage } = actions

    createPage({
       path: "/blog/id/slug",
       matchPath: "/blog/:id/:slug",
       component: path.resolve("src/components/Blogpage.jsx")
    })


    // Another try
    if (page.path.match(/^\app/)) {
       page.matchPath = "/blog/:id/:slug"

       createPage(page)
    }

}

此外，我正在使用firebase hosting。我还尝试配置我的 firebase.json 文件以像这样重定向：

{
  "hosting": {
     ...,
     "redirects": [
         {
            "source": "/blog/:id*",
            "destination": "/blog/:id/:slug",
            "type": 301
         }
     ]
  }
}

Answer 1

我有办法了！我需要做的就是，我必须使用 firebase.json 文件中的 rewrites 以这种方式定义我的博客页面：


{
  "hosting": {
     ...,
     "rewrites": [
         {
            "source": "blog/**",
            "destination": "/index.html"
         }
     ]
  }
}

它很有魅力。

Gatsby 仅客户端路径在生产中的浏览器中首次加载时显示 404

Gatsby client only paths is showing 404 on first load in browser in production

firebase

firebase-hosting

gatsby