盖茨比动态路由 404 构建

Question

我正在使用 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>

盖茨比-node.js

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

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

的路由器

非常感谢您的帮助！

Answer 1

我解决了。

我只需要在 public 目录中放置一个 .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]

Answer 2

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

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

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

盖茨比动态路由 404 构建

Gatsby Dynamic Routing 404 build

reactjs

react-router

gatsby

react-router-dom

reach-router