即使在添加 .htaccess 后,反应应用程序中的 Apache 错误 404 [英] Apache Error 404 in react app even after adding .htaccess
问题描述
我在 /var/www/my_webpage/
这是我的虚拟主机配置
服务器名称 www.domain.comServerAlias domain.comDocumentRoot/var/www/my_webpage错误日志 ${APACHE_LOG_DIR}/error.logCustomLog ${APACHE_LOG_DIR}/access.log 合并# 将所有 http 请求重定向到 https - 由 CertBot 自动添加重写引擎开启RewriteCond %{SERVER_NAME} =prudent-solutions.co.in [或]RewriteCond %{SERVER_NAME} =www.prudent-solutions.co.in重写规则 ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]</虚拟主机>
和我的 .htaccess
文件在文档根目录 /var/www/my_webpage
选项 -MultiViews重写引擎开启RewriteCond %{REQUEST_FILENAME} !-f重写规则 ^ index.html [QSA,L]
主页运行良好.但是当我访问 domain.com/some_thing 时,我收到来自 Apache
的 404 错误我浏览了许多有关 React 部署的网站和教程.我不明白他们是如何简单地添加一个 .htaccess 文件并使他们的网站正常工作,以及为什么我没有发生同样的事情.我对 Apache mod_rewrite 完全陌生.
另外,我也不想设置单独的 express.js 服务器来将所有请求路由到 index.html 文件或使用 HashRouter 而不是 BrowserRouter.
错误截图
我的反应路由器
import "./App.css";//导入 react 组件/页面 ----------------------------------从./components/Misc/Revamp"导入改造;从./Shared/Navbar"导入导航栏;//导入路由需求 ----------import { BrowserRouter as Router, Switch, Route } from react-router-dom";功能应用(){返回 (<路由器><导航栏/><开关><路由组件={Revamp}/></开关></路由器>);}导出默认应用程序;
我的manifest.json
<代码>{short_name":反应应用程序",名称":创建 React 应用程序示例",主页":.",图标":[{src":favicon.ico",尺寸":64x64 32x32 24x24 16x16",类型":图像/x 图标";},{src":logo192.png",类型":图像/png",尺寸":192x192"},{src":logo512.png",类型":图像/png",尺寸":512x512"}],"start_url": ".",显示":独立",theme_color":#000000",background_color":#ffffff"}
其他详细信息
Apache 版本:服务器版本:Apache/2.4.41 (Ubuntu)服务器构建时间:2020-08-12T19:46:17
你需要教你的服务器重定向到 index.html错误 404:
# ...DocumentRoot/var/www/my_webpage<目录"/var/www/my_webpage>AllowOverride 无 # 第 1 行ErrorDocument 404/index.html #第2行:这里我们设置ErrorDocument要求所有授予</目录># ...
现在,您需要重新启动 apache2 服务器.
或者,在项目根目录下的.htaccess
文件中添加以下行(不要忘记在上面显示的第1行处AllowOverride ALL
):
ErrorDocument 404/index.html
I've a production react app (contents of the build folder) in /var/www/my_webpage/
This is my virtual host config
<VirtualHost *:80>
ServerName www.domain.com
ServerAlias domain.com
DocumentRoot /var/www/my_webpage
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
# redirect all the http requests to https - added automatically by CertBot
RewriteEngine on
RewriteCond %{SERVER_NAME} =prudent-solutions.co.in [OR]
RewriteCond %{SERVER_NAME} =www.prudent-solutions.co.in
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>
And my .htaccess
file in the document root /var/www/my_webpage
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
The home page is working fine.
But when I go to domain.com/some_thing, I get a 404 Error from Apache
I've went through many websites and tutorials for react deployment. I can't understand how they simply add a .htaccess file and make their website work and why the same is not happening for me. I'm completely new to Apache mod_rewrite.
Also I'm not interested to setup a separate express.js server to route all the requests to index.html file or use HashRouter instead of BrowserRouter.
Screenshot of the error
My react-router
import "./App.css";
// Importing react components/Pages ----------------------------------
import Revamp from "./components/Misc/Revamp";
import Navbar from "./Shared/Navbar";
// Importing Route requirements ----------
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<Navbar />
<Switch>
<Route component={Revamp} />
</Switch>
</Router>
</div>
);
}
export default App;
My manifest.json
{
"short_name": "React App",
"name": "Create React App Sample",
"homepage": ".",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Additional details
Apache version:
Server version: Apache/2.4.41 (Ubuntu)
Server built: 2020-08-12T19:46:17
You need to teach your server to redirect to index.html on error 404:
<VirtualHost *:80>
# ...
DocumentRoot /var/www/my_webpage
<Directory "/var/www/my_webpage">
AllowOverride None # Line 1
ErrorDocument 404 /index.html # Line 2: Here we set ErrorDocument
Require all granted
</Directory>
# ...
Now, you need to restart the apache2 server.
Or, add below line in .htaccess
file under project root directory (don't forget to AllowOverride ALL
at Line 1 shown above):
ErrorDocument 404 /index.html
这篇关于即使在添加 .htaccess 后,反应应用程序中的 Apache 错误 404的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!