React 静态网站将除主页之外的每个页面都重定向到 404

Question

我将我的第一个 React 应用程序发布到我的共享主机上。

它是一个多页面的 React 应用程序，在我成功构建我的项目后，我做了 Yarn Build 并创建了一个构建文件夹

我将构建的文件夹上传到我的主机，但出于某种原因，我的主机只显示主页而没有显示其他页面（其他页面在本地主机上工作）

的 link

 <Route exact path="/printing" component={Printing} />'

但是当我去spaceyfi.com/printing的时候，它打不开。

[更新:] 这是我的构建文件夹，它只包含一个 HTML 文件（如果相关的话） https://github.com/irohitb/portfolio-/tree/master/build

[问题:]我该如何解决？

Answer 1

您有一个静态网站 index.html。您希望 react-router 为您处理所有请求和导航。

现在，当您点击 spaceyfi.com/printing 时，Apache 服务器会在目录中搜索目录 printing 和 index.html。没有找到，它的响应是 404 not found.

在 webpack 开发模式下，开发服务器配置有 historyApiFallback 为此目的：

  devServer: {
    inline: true,
    port: 8080,
    historyApiFallback: {
      index: '/'
    }
  }

要配置您的网络服务器使 react-router 处理所有路由，您需要修改重定向规则。

如果您使用 Amazon S3 进行统计托管，请阅读 this guide。

如果您使用其他服务进行静态托管，请参阅文档。配置应如下所示：

希望这个回答对您有所帮助，并为您指明正确的（重新）方向。

确保也使用 react-routerLink 组件进行导航。

Answer 2

所以，我使用的是 Namecheap 的主机（共享主机），为了使用其他路由，您需要这样做

在我们所在的目录中 uploading/putting 我们的文件.. 我们需要创建一个 .htaccess。在那 .htaccess 中放置此配置（对我而言，复制并过去完成了工作）

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Answer 3

对于 GCP 存储（Google 相当于 S3），我听从了 yotke 的建议并且效果很好：

gsutil web set -m index.html -e index.html

React static website redirect every page to 404 besides homepage