使用GoDaddy托管的React应用在页面刷新时,react-router会抛出404

时间:2019-10-18 14:25:31

标签: reactjs .htaccess react-router plesk plesk-onyx

我使用GoDaddy(http://normaned.com)部署了一个React网站,但我的react-router路由在刷新时无法正常工作。单击链接可以按预期工作,但是如果刷新页面,则会显示404页面。我正在使用BrowserRouter中的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>

我直接在Plesk中创建了.htaccess文件,确保没有添加任何多余的字符(如本文中的建议(https://www.godaddy.com/help/what-is-htaccess-2504

尝试解决一些问题后,我意识到这可能与我使用Plesk vs 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-)找到了这篇文章,这使我进入了这篇Microsoft文章(https://blogs.msdn.microsoft.com/azureossds/2015/04/23/converting-apache-htaccess-rules-to-iis-web-config-using-iis-manager-for-azure-websites/)。

3 个答案:

答案 0 :(得分:1)

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

根据create-react-app文档:

如果使用的是Apache HTTP Server,则需要在公用文件夹中创建一个.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

答案 1 :(得分:0)

原来,我使用的是Windows IIS服务器。我是Web服务器领域的新手,并且不知道我在使用IIS服务器。

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

这是我的web.config文件的内容(从this StackOverflow答案中找到):

<?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>

答案 2 :(得分:0)

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

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

然后运行

<块引用>

npm 构建

<块引用>

纱线构建