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

Posted 2023-02-22

【中文标题】React 应用程序返回 500 内部服务器错误

【英文标题】：React app returning 500 Internal Server Error

【发布时间】：2017-08-15 18:33:00

【问题描述】：

我有一个使用 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>

任何帮助表示赞赏。

【参考方案1】：

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

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

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

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

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

在快递服务器中，您会执行以下操作：

app.get('*', function(req, res)
  res.sendFile(__dirname + '/index.html');
);

意思是，所有对您的服务器（应用程序）的 GET 请求将引导用户访问相同的“index.html”。

【讨论】：

您好，谢谢。但是该应用程序被构建并呈现为带有 js 和 css 资产的单个 html 页面。路由应该都是客户端...？

对于“create-react-app”我想是的，应该只是客户端。但同样，500 是服务器端错误，这意味着您确实使用某种服务器来运行该应用程序。 'webpack-dev-server' 我猜 ))) 无论如何，你应该在 CMD/console 中收到一些消息，在其中运行“npm run start”或类似的东西来运行你的应用程序。

欢迎来到Stack Overflow！请阅读How to 并提供Minimal, Complete, and Verifiable example！

那个“减号”到底是什么意思？

【参考方案2】：

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

【参考方案3】：

当您直接访问应用的路线时，例如via 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。

【讨论】：

这是否支持 URL 参数？因为我现在收到 404 错误，但我不确定这是否相关。天呐！

是的，它确实支持 URL 参数。