React 应用程序返回 500 内部服务器错误

IT技术 javascript reactjs react-router create-react-app
2021-04-30 13:21:36

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

在我运行npm run build并将应用程序部署为静态站点后,一切正常,除非我在索引以外的路由上刷新页面时,它失败并显示500 internal server error.

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

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

任何帮助表示赞赏。

3个回答

当您直接访问应用程序的路由时,例如通过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]

有关更多信息,请查看此内容

您服务器的路由应该与 react-router 中定义的路由相匹配,如果它们不匹配,那么您将收到 500 错误。

你能分享一些错误日志截图或复制粘贴吗?500 显然是服务器端错误。也许您在服务器上的路由与 url 模式不匹配。或者某些快速服务器路由函数抛出异常。

请提供一些来自客户端和/或服务器的日志。

UPD:刚才提到了“静态站点”的事情。没明白你这到底是什么意思。对我来说,它根本不是服务器。

我仍然很确定您的服务器没有配置路由。

服务器知道什么是“/”(“index.html”)。但是没有为“/potatoes”配置路由。

在快速服务器中,您会执行以下操作:

app.get('*', function(req, res){
  res.sendFile(__dirname + '/index.html');
});
  • 意思是,对您的服务器(应用程序)的所有 GET 请求都将引导用户访问相同的“index.html”。