reactjs - 刷新 react 应用程序，404 错误。 react 路由器问题

Question

我正在使用 react 样板 ( https://github.com/react-boilerplate/react-boilerplate )我的应用程序在本地主机上完美运行，但是在子目录中的服务器上部署后(重要!不在根目录中!)应用程序工作直到刷新......如果我尝试在应用程序在其他路径(/某物/此处)时刷新，我收到 404 错误页面未找到。

我搜索了很多有关此问题的信息，我弄清楚了问题所在和解决方案，但我无法解决...您可以在此处查看问题说明: https://tylermcginnis.com/react-router-cannot-get-url-refresh/

我正在使用 React Router 4。也许我需要使用historyApiFallback:真但我不知道如何将它与具有大量 webpack 配置文件(不仅是一个 ..)的 react 样板一起使用。有帮助吗？

Answer 1

我之前也遇到过这个问题。在本地主机上完全没问题，但在非根路由上刷新或直接输入非根 URL 总是给我 404。得出的结论是它自己找不到非根目录，因为 React 只有 index.html 作为它的 HTML 文档并需要一些重写规则。

在我的例子中，我的主机正在使用 Apache 并将 .htaccess 添加到我的 web 根目录，并具有以下内容:

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

对于nginx，当然需要修改nginx的配置。我在这里找到了一个答案，它看起来比 Apache 的答案简单得多:React-router and nginx

location / {
  try_files $uri /index.html;
}

基本上你需要告诉网络服务器将所有请求转发到你的 React 的 index.html，因此让 react-router 处理路由。

其他解决方案是使用HashRouter，但会导致一些丑陋的 URL。