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

Question

我在 Apache 2.4 中使用 React 16.12.0。我似乎无法通过在浏览器中键入来访问 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]

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

Answer 1

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

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

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

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

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

Why won't my React application work with my Apache .htaccess file to prevent 404s?

apache

http-status-code-404

reactjs

react-router