使用托管在 GoDaddy 上的 React 应用程序，react-router 在页面刷新时抛出 404
react-router throwing 404 upon page refresh with React app hosted on GoDaddy
我使用 GoDaddy (http://normaned.com) 部署了一个 React 网站，我遇到了 react-router 路由在刷新时无法正常工作的问题。单击链接按预期工作，但如果刷新页面，则会显示 404 页面。我正在使用 react-router 中的 BrowserRouter。
GoDaddy 托管计划是 "Economy Windows Hosting with Plesk"。不幸的是，我不是设置托管服务的人，我不确定我是否可以在没有额外金钱成本的情况下从 Plesk 更改为 cPanel ... 或者这是否是一种更接近解决我的问题的方法（即 Windows 与 Linux 托管）。
编辑 10/19：我现在意识到服务器是 Windows IIS 服务器，我需要一个 web.config 文件（不是 .htaccess 文件).不过，我仍然不确定 web.config 文件中需要包含哪些代码。
这是我的 GitHub 网站回购：https://github.com/jenna-m/norman-ed
我已经尝试了在 Whosebug、GoDaddy 帮助论坛和其他地方找到的建议方法，但仍然无法正常工作。 以下是我尝试过的一些方法：
https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042
我尝试将以下内容添加到 public_html 根目录中的 .htaccess 文件中：
<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>
我直接在 Plesk 中创建了 .htaccess 文件，确保没有添加额外的字符（如本文中所建议的那样 (https://www.godaddy.com/help/what-is-htaccess-2504)
在尝试解决问题后，我意识到这可能与我使用的是 Plesk vs cPanel 有关。因此，我发现了这些潜在的解决方法：
我认为这些解决方案中的任何一个都可行，但它们没有。
我从 Plesk 支持 (https://support.plesk.com/hc/en-us/articles/115000063989-Does-Plesk-support-Apache-web-server-for-Windows-), which lead me to this Microsoft article (https://blogs.msdn.microsoft.com/azureossds/2015/04/23/converting-apache-htaccess-rules-to-iis-web-config-using-iis-manager-for-azure-websites/) 找到了这个 post。
如果您使用的是 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]
Link 到 create-react-app 文档：
https://create-react-app.dev/docs/deployment
您可以在 React 路由器中阅读有关在 React 中创建 404 页面的更多信息：文档：
原来我使用的是 Windows IIS 服务器。我是 Web 服务器领域的新手，并不知道我在使用 IIS 服务器。
事实证明，我需要一个 web.config 文件来使我的 URL 重定向工作，而不是 .htaccess 文件，就像我最初尝试使用的那样。
这是我的 web.config 文件的内容（从 Whosebug 答案中找到）：
<?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>
尝试在 package.json 文件中指定您的主页
{
"homepage": "https://yoursite.com",
}
然后运行
npm build
或
yarn build
我使用 GoDaddy (http://normaned.com) 部署了一个 React 网站，我遇到了 react-router 路由在刷新时无法正常工作的问题。单击链接按预期工作，但如果刷新页面，则会显示 404 页面。我正在使用 react-router 中的 BrowserRouter。
GoDaddy 托管计划是 "Economy Windows Hosting with Plesk"。不幸的是，我不是设置托管服务的人，我不确定我是否可以在没有额外金钱成本的情况下从 Plesk 更改为 cPanel ... 或者这是否是一种更接近解决我的问题的方法（即 Windows 与 Linux 托管）。
编辑 10/19：我现在意识到服务器是 Windows IIS 服务器，我需要一个 web.config 文件（不是 .htaccess 文件).不过，我仍然不确定 web.config 文件中需要包含哪些代码。
这是我的 GitHub 网站回购：https://github.com/jenna-m/norman-ed
我已经尝试了在 Whosebug、GoDaddy 帮助论坛和其他地方找到的建议方法，但仍然无法正常工作。 以下是我尝试过的一些方法：
https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042
我尝试将以下内容添加到 public_html 根目录中的 .htaccess 文件中：
<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>
我直接在 Plesk 中创建了 .htaccess 文件，确保没有添加额外的字符（如本文中所建议的那样 (https://www.godaddy.com/help/what-is-htaccess-2504)
在尝试解决问题后，我意识到这可能与我使用的是 Plesk vs cPanel 有关。因此，我发现了这些潜在的解决方法：
我认为这些解决方案中的任何一个都可行，但它们没有。
我从 Plesk 支持 (https://support.plesk.com/hc/en-us/articles/115000063989-Does-Plesk-support-Apache-web-server-for-Windows-), which lead me to this Microsoft article (https://blogs.msdn.microsoft.com/azureossds/2015/04/23/converting-apache-htaccess-rules-to-iis-web-config-using-iis-manager-for-azure-websites/) 找到了这个 post。
如果您使用的是 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]
Link 到 create-react-app 文档：
https://create-react-app.dev/docs/deployment
您可以在 React 路由器中阅读有关在 React 中创建 404 页面的更多信息：文档：
原来我使用的是 Windows IIS 服务器。我是 Web 服务器领域的新手，并不知道我在使用 IIS 服务器。
事实证明，我需要一个 web.config 文件来使我的 URL 重定向工作，而不是 .htaccess 文件，就像我最初尝试使用的那样。
这是我的 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>
尝试在 package.json 文件中指定您的主页
{
"homepage": "https://yoursite.com",
}
然后运行
npm build
或
yarn build