Gatsby 动态路由 404 构建答案

【问题标题】：Gatsby Dynamic Routing 404 buildGatsby 动态路由 404 构建
【发布时间】：2021-12-03 22:56:54
【问题描述】：

我正在使用 Gatsby 和 Strapi 构建一个网站。我正在使用dynamic routes。

有了gatsby develop，一切都好。

使用gatsby build，页面之间的链接可以正常工作，但输入 URL 时会出现 404。示例：我可以通过单击从 / 转到 /room，但是当我输入 /room 时，我得到一个 404。

我应该如何解决这个问题？我错过了什么吗？

index.js 路由部分：

        <Router basepath="/">
          <Doors path="/" exitTransition={exitTransition}></Doors>
          <Room path="/room" exitTransition={exitTransition}></Room>
          <Sound path="/sound" sounds={sounds} currentSoundIndex={currentSoundIndex} setCurrentSoundIndex={setCurrentSoundIndex} audioPlayerRef={audioPlayerRef}></Sound>
          <Cloakroom path="/cloakroom" clothes={clothes}></Cloakroom>
          {clothesRoutes}
        </Router>

gatsby-node.js

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
  if (page.path === `/`) {
    page.matchPath = `/*`
    createPage(page)
  }
}

注意： 本地 http-server 构建正在运行。但在我客户的托管服务器上却不是。我正在使用来自@reach/router 的路由器。

非常感谢您的帮助！

【问题讨论】：

你检查了斜杠吗？尝试联系/room/ 时是否有效？
不会改变任何东西...
但实际上我注意到当我在线上传网站时出现了问题。有人有提示吗？
什么服务器？自托管？网络化？维塞尔？盖茨比云？ AWS？
那是在 AlpHosting Apache 服务器上。用 .htaccess 解决了！

标签： reactjs react-router gatsby react-router-dom reach-router

【解决方案1】：

扩展@Antbarras提出的解决方案。 .htaccess 不得放在公用文件夹中，因为它是一个自动生成的目录，在每个构建中都会被覆盖，因此如果您将任何文件放在那里，它将在下一个构建中丢失，因为源代码没有。

在公用文件夹中添加永久.htaccess的方法是通过static folder，这是一个文件夹，其内容被克隆到/public文件夹中，保持内部结构。所以：

在项目的根目录下创建一个/static 文件夹
在第一级添加.htaccess

【讨论】：

【解决方案2】：

我已经解决了。

我只需将.htaccess 文件放在包含该内容的公共目录中：

RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

【讨论】：