godaddy cPanel React - 新页面显示 404

Question

我使用 React 创建了我的第一个单页应用程序 (SPA) 静态网站，并将其托管在 Godaddy 上。已经上线一个月了，运行良好。

几天前，我创建了一个“联系我”页面，用户可以在其中填写表格并使用 Nodemailer 向我发送电子邮件。

无论如何，当我完成“联系我”页面时，我运行了

npm run build

，并按照指示将所有内容上传到

public_html

文件夹中的cPanel。但是主页可以工作，但“/contactus”页面返回 404。

我与 Godaddy 交谈过，他们的第一个建议是添加

.htaccess

文件，将所有内容从 HTTP 重定向到 HTTPS。我这样做了，但它仍然返回 404。

这是 .htaccess 文件的内容

RewriteEngine On 
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^(www\.)?coolexample\.com
RewriteRule ^(.*)$ https://www.coolexample.com/$1 [R,L]

我第二次与 GoDaddy 交谈，他们告诉我在 index.html 中找不到“/ContactUs”。我以为

npm run build

处理了这个？

当我使用

npm start

时，联系我们链接可以工作，并且它在我的本地主机上运行。

我的

app.js

代码如下所示：

import React from "react"
import {AuthProvider} from "../contexts/AuthContext"
import {BrowserRouter as Router, Switch, Route} from "react-router-dom"
import ContactUs from "./ContactUs";
import Home from "./Home"
import ForgotPassword from "./ForgotPassword"
import NavigationBar from "./NavigationBar";
import NoMatch from "./NoMatch";

function App() {
    return (
        <React.Fragment>
            <AuthProvider>
                <NavigationBar/>
            </AuthProvider>
            <div>
                <Router>
                    <AuthProvider>
                        <Switch>
                            <Route exact path="/" component={Home}/>
                            <Route exact path="/ContactUs" component={ContactUs}/>                            
                            <Route path="/forgot-password" component={ForgotPassword}/>
                            <Route component={NoMatch}/>
                        </Switch>
                    </AuthProvider>
                </Router>
            </div>
        </React.Fragment>
    )
}

我错过了什么？

感谢任何和所有的帮助/指导。

Answer 1

fml。显然，godaddy 给我的

.htaccess

内容是不正确的......令人震惊。

他们给了我

RewriteEngine On 
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^(www\.)?coolexample\.com
RewriteRule ^(.*)$ https://www.coolexample.com/$1 [R,L]

本来应该是这样的

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

从这里得到它。正如链接所说，它确实是页面上最重要的信息。

Answer 2

我在 c 面板上上传的 next.js 项目中遇到类似的问题。在首页以外的刷新页面上。网站给出了404页面。