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

Question

我使用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]

然而，虽然我可以导航到像"/搜索"这样的url，当我在浏览器栏中输入它，或者点击"刷新"在那个页面上，我得到一个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文件的目录。