我使用 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>
)
}
我错过了什么?
感谢任何和所有的帮助/指导。
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>
从这里得到它。正如链接所说,它确实是页面上最重要的信息。
我在 c 面板上上传的 next.js 项目中遇到类似的问题。在首页以外的刷新页面上。网站给出了404页面。