为啥我的 React 应用程序不能使用我的 Apache .htaccess 文件来防止 404？

Posted 2023-03-25

【中文标题】为啥我的 React 应用程序不能使用我的 Apache .htaccess 文件来防止 404？

【英文标题】：Why won't my React application work with my Apache .htaccess file to prevent 404s?为什么我的 React 应用程序不能使用我的 Apache .htaccess 文件来防止 404？

【发布时间】：2021-11-20 02:05:08

【问题描述】：

我将 React 16.12.0 与 Apache 2.4 一起使用。即使我可以导航到一个 URL，我似乎也无法通过在浏览器中输入来访问一个 URL。我在我的 App.js 文件中设置了这个...

      <div className="auth-wrapper">
        <div className="auth-inner">
          <Switch>
            <Route exact path="/" component=Map />
            <Route path="/add" component=Add />
            <Route path="/edit/:id" component=Edit />
            <Route path="/search" component=Search />
            <Route path="/nocoords" component=NoCoordsSearch />
            <Route
              path="/directory-additions-updates/:id"
              component=DirectoryAddUpdate
            />
            <Route
              path="/directory-additions-updates/"
              component=DirectoryAddUpdate
            />
            <Route path="/:coop_id/people" component=AddPerson />
            <Route path="/person/:id/edit" component=EditPerson />
            <Route path="/:coop_id/listpeople" component=ListPeople />
          </Switch>
        </div>
      </div>

我已经创建了这个 .htaccess 文件

cat /var/www/html/client/.htaccess
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
 RewriteCond %REQUEST_FILENAME !-f
 RewriteCond %REQUEST_FILENAME !-d
RewriteRule . /index.html [L]

但是，尽管我可以导航到诸如“/search”之类的 URL，但当我在浏览器栏中键入该 URL 或在该页面上单击“刷新”时，我得到了 404。我还需要做什么来配置我的应用程序，以便我可以通过键入 URL 来访问它？

【参考方案1】：

有几件事情出错了。我的 .htaccess 文件与我的“index.html”文件不在同一目录中，因此必须移动。

其次，需要将此添加到我的 Apache 虚拟配置中

    <Directory "/var/www/html/client/build/">
      Options Indexes FollowSymLinks
      AllowOverride all
    </Directory>

其中 /var/www/html/client/build/ 是包含 index.html 文件的目录。