为什么我的 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 来访问它？

【问题讨论】：

标签： reactjs apache react-router http-status-code-404

【解决方案1】：

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

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

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

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

【讨论】：