Question

我有一个使用create-react-app创建的反应应用。

在我运行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>

任何帮助表示感谢。

Answer 1

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

Answer 2

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

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

<强> UPD ：刚刚提到了＃34;静态网站＆＃34;事情。我不明白你究竟是什么意思。对我来说，它根本就没有服务器。

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

服务器知道什么是＆＃34; /＆＃34;（＆＃34; index.html＆＃34;）。但是，没有为＃34; / potatoes＆＃34;配置路由。

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

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

意思是，所有对您的服务器（应用程序）的请求都将引导用户进行相同的＆＃34; index.html＆＃34;。

Answer 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]

有关更多信息，请查看this。

React app返回500内部服务器错误

3 个答案: