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 文件，用于这样定义我的博客页面。

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

它的工作原理很神奇。