如何配置共享主机（例如 Hostgator）以显示我的 React 应用程序的子页面？

Question

我用 reactJS 创建了一个页面，我正在尝试将它上传到 Hostgator。我使用了 react-router-dom 并且我可以访问主网站页面，但是当我尝试访问像 /about 这样的内部页面时，我收到 404 错误。

Answer 1

您正在寻找的模式称为 front controller。您希望通过中央处理逻辑路由每个 URL，以便它可以选择在那个 URL 上显示哪些内容。对于 React，该逻辑在 Router 组件中实现。

Hostgator 等共享主机通常使用 Apache 服务器。默认情况下，Apache 将 URLs 映射到本地文件系统。如果该路径中存在一个文件，它会提供它，否则会显示 404 错误。你需要覆盖这个行为来让你的 React 路由器能够完成它的工作。使用 Apache，可以在名为 .htaccess.

的文件中实现配置覆盖

Deployment | Create React App 有代码，您需要将其放入网络主机上的 .htaccess 文件中，与 index.html:

位于同一目录中

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

这会导致每个 URL 都由 index.html 处理，除非文件系统中实际存在同名的不同文件。 index.html 包括你的 React 路由规则。

Answer 2

如果您需要在共享主机中重定向您的 Create-react-app 路由。您必须在根 index.html 文件目录中创建一个 .htaccess 文件。

然后您需要在 .htaccess 文件中编写代码，例如（代码如下）：

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

如何配置共享主机（例如 Hostgator）以显示我的 React 应用程序的子页面？

How do I configure shared hosting (such as Hostgator) to show my React app for sub pages?

routes

http-status-code-404

react-router-dom