即使在添加 .htaccess 之后，反应应用程序中的 Apache 错误 404

Posted 2023-03-10

【中文标题】即使在添加 .htaccess 之后，反应应用程序中的 Apache 错误 404

【英文标题】：Apache Error 404 in react app even after adding .htaccess

【发布时间】：2021-07-29 11:07:22

【问题描述】：

我在/var/www/my_webpage/ 中有一个生产反应应用程序（构建文件夹的内容）

这是我的虚拟主机配置

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

还有我在文档根目录/var/www/my_webpage中的.htaccess文件

Options -MultiViews
RewriteEngine On
RewriteCond %REQUEST_FILENAME !-f
RewriteRule ^ index.html [QSA,L]

主页运行良好。 但是当我访问 domain.com/some_thing 时，我从 Apache 收到 404 错误 我浏览了许多用于反应部署的网站和教程。我不明白他们是如何简单地添加一个 .htaccess 文件并使他们的网站正常工作，以及为什么我没有发生同样的事情。我对 Apache mod_rewrite 完全陌生。

我也不想设置一个单独的 express.js 服务器来将所有请求路由到 index.html 文件或使用 HashRouter 而不是 BrowserRouter。 错误截图

我的反应路由器

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;

我的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"

更多细节

Apache version:
Server version: Apache/2.4.41 (Ubuntu)
Server built:   2020-08-12T19:46:17 

【参考方案1】：

你需要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>

  # ...

现在，您需要重新启动 apache2 服务器。

---

或者，在项目根目录下的.htaccess文件中添加以下行（不要忘记在上面显示的第1行AllowOverride ALL）：

ErrorDocument 404 /index.html