javascript - React 应用返回 500 Internal Server Error

Question

我有一个 React 应用程序，是使用 create-react-app 创建的。

在我运行 npm run build 并将应用程序部署为静态站点后，一切正常，除了当我在索引以外的路由上刷新页面时，它失败并显示 500内部服务器错误。

下面是我的路由器的代码。使用 react 路由器。

<Router history={browserHistory}>
  <Route path="/">
      <IndexRoute component={Login}/>
      <Route path="/dashboard" component={Dashboard}></Route>
      <Route path="/profile" component={Profile}/>
</Router>

感谢任何帮助。

Answer 1

当您直接访问您应用的某个路径时，例如通过https://myapp.com/route/123 Apache 尝试将该 URL 映射到公用文件夹中的文件。在这种情况下，它会查找显然不存在的/route/123.html。 为避免这种情况，我们必须告诉 Apache 将所有请求重定向到我们的 index.html，以便我们的应用程序可以对该 URL 执行一些路由魔术。 要告诉 Apache 将请求重定向到我们应用程序所在的 index.html，我们必须修改 .htaccess 文件。如果您应用的文件夹中还没有这样的文件，请创建它。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

更多信息请查看this出。