5

我使用 GoDaddy ( http://normaned.com )部署了一个 React 网站，但我的react-router路由在刷新时无法正常工作。单击链接按预期工作，但如果刷新页面，则会显示 404 页面。我正在使用BrowserRouterfrom react-router。

GoDaddy 托管计划是“使用 Plesk 进行经济型 Windows 托管”。不幸的是，我不是设置托管服务的人，而且我不确定我是否可以从 Plesk 更改为 cPanel 而无需额外的金钱成本……或者这是否是一种更接近解决我的问题的方法（即，Windows 与 Linux 托管）。

编辑 10/19：我现在意识到服务器是 Windows IIS 服务器，我需要一个web.config文件（不是.htaccess文件）。不过，我仍然不确定web.config文件中需要包含哪些代码。

这是我的网站 GitHub 存储库：https ://github.com/jenna-m/norman-ed

我已经尝试过在 StackOverflow、GoDaddy 帮助论坛和其他地方找到的建议方法，但仍然无法正常工作。以下是我尝试过的一些事情：

https://stackoverflow.com/a/40591955/11995771

https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042

我尝试将以下内容添加到根目录中的.htaccess文件中：public_html

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

我.htaccess直接在 Plesk 中创建了文件，确保没有添加额外的字符（如本文建议的那样 ( https://www.godaddy.com/help/what-is-htaccess-2504 )

在尝试解决了一段时间后，我意识到这可能与我使用 Plesk 与 cPanel 的事实有关。所以，我发现了这些潜在的解决方法：

https://support.plesk.com/hc/en-us/articles/115001697373-Website-with-configured-htaccess-is-not-working-404-Not-Found

https://support.plesk.com/hc/en-us/articles/115003015833-Redirection-rules-in-htaccess-file-do-not-work-in-Plesk

我认为这些解决方案中的任何一个都可以工作，但他们没有。

我从 Plesk 支持 ( https://support.plesk.com/hc/en-us/articles/115000063989-Does-Plesk-support-Apache-web-server-for-Windows- ) 中找到了这篇文章，这让我这篇微软文章（https://blogs.msdn.microsoft.com/azureossds/2015/04/23/converting-apache-htaccess-rules-to-iis-web-config-using-iis-manager-for-azure-网站/）。

4

3 回答 3

10

如果您使用的是 Apache 服务器，问题可能是您的 .htaccess 文件，当您使用 React 路由器时，在 React 中创建或声明的路由在服务器中不存在，因此我们必须配置请求，以便每个请求都通过到 index.html 并在找不到页面时在 React 中显示 404。

根据 create-react-app 文档：

如果您使用的是 Apache HTTP Server，则需要在 public 文件夹中创建一个 .htaccess 文件，如下所示：

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

链接到 create-react-app 文档：

https://create-react-app.dev/docs/deployment

您可以在 React 路由器中阅读有关在 React 中创建 404 页面的更多信息：文档：

https://reacttraining.com/react-router/web/example/no-match

于 2019-10-18T14:48:30.087 回答
4

事实证明，我使用的是 Windows IIS 服务器。我是 Web 服务器世界的新手，不知道我正在使用 IIS 服务器。

事实证明，我需要一个web.config文件来使我的 URL 重定向工作，而不是一个.htaccess文件，就像我最初尝试使用的那样。

这是我的文件的内容（从这个StackOverflow 答案中找到）web.config：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>
于 2019-10-19T17:35:05.580 回答
0

尝试在 package.json 文件中指定您的主页

{
"homepage": "https://yoursite.com",
}

然后运行

npm 构建

或者

纱线构建

于 2021-05-04T20:25:17.317 回答