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

Posted 2023-02-22

【中文标题】React 静态网站将除主页外的每个页面重定向到 404

【英文标题】：React static website redirect every page to 404 besides homepage

【发布时间】：2019-01-29 20:39:50

【问题描述】：

我将我的第一个 react 应用发布到我的共享主机。

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

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

这是我网站的链接：http://spaceyfi.com/ 这是我的 github 仓库的链接 https://github.com/irohitb/portfolio-

在 repo 中，路由，I have a path named printing

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

但是当我转到spaceyfi.com/printing 时，它并没有打开。

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

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

【问题讨论】：

我对 React 还是很陌生，所以我只是在做一个观察，但是您正在用小写导出组件并用大写 export default printing 和 component=Printing 调用它们 - 不确定这是否导致找不到页面？

@MikeDiglio 即使我也是新人，但仍然在 JS 中（可能）如果你使用 export default 那么你可以用你想要的任何名称导入它，即我什至可以使用类似 component= Ptg 直到并且除非我使用该名称导入它，即import Ptg from './container/Printing/printing.js'

【参考方案1】：

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

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

在 webpack 开发模式下，开发服务器配置具有用于该目的的 historyApiFallback：

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

要配置你的 web 服务器让 react-router 处理所有的路由，你需要修改重定向规则。

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

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

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

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

【讨论】：

它确实引导我朝着正确的方向前进，我非常感谢您的支持，但我找到了一个替代帖子，它提供了一个非常简单的答案。我将在答案部分分享它

@static_null，看到这个answer

【参考方案2】：

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

在我们上传/放置文件的目录中。我们需要创建一个.htaccess。在那个.htaccess 里放这个配置（对我来说是复制过去的）

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

【参考方案3】：

对于 GCP 存储（相当于 Google 的 S3），我遵循了 yotke 的建议，效果很好：

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