.htaccess React应用程序托管在GoDaddy上时,页面刷新时React路由器抛出404

ugmeyewa  于 2022-11-16  发布在  React
关注(0)|答案(4)|浏览(176)

我使用GoDaddy(http://normaned.com)部署了一个React网站,但我的react-router路由在刷新时无法正常工作。单击链接可以正常工作,但如果刷新页面,则会显示404页面。我使用的是react-router中的BrowserRouter
GoDaddy托管计划是“使用Plesk的经济型Windows托管”。不幸的是,我不是设置托管服务的人,我不确定我是否可以在不增加额外费用的情况下从Plesk更改为cPanel ...或者这是否是一种更接近解决我的问题的方法(iidoEe.,Windows vs 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
我尝试将以下代码添加到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和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/)。

a2mppw5e

a2mppw5e1#

如果您使用的是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

6yjfywim

6yjfywim2#

原来我使用的是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>
idfiyjo8

idfiyjo83#

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

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

然后运行
npm构建

Yarn成形

xpcnnkqh

xpcnnkqh4#

按照以下步骤操作,您将没事
1.在package.json文件中指定主页,如下所示

{
  "name": "yourappname",
  "homepage": "http://example.com",//add your domain here line
  "private": true,
  "version": "0.0.0",
 }

2.通过运行yarn buildnpm run build构建您的应用
3.然后复制build文件夹的内容并将其粘贴到cpanel的public_html文件夹中
3.转到Cpanel文件管理器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>

注意此文件夹的.htaccess应该与build文件夹的内容处于同一级别。

1.保存并完成操作

相关问题