React 路由在 facebook 的 create-react-app 构建中不起作用

IT技术 javascript reactjs react-router react-router-redux create-react-app
2021-05-06 01:48:15

我正在使用react-router来定义路由。我正在使用create-react-app进行开发。我的问题是,如果我在地址栏中键入子页面的 url 并尝试访问它,它在开发版本中有效,但在生产版本中无效。

我正在使用一个简单的快速服务器来托管生产版本

var express = require('express'),
  app = express(),
  http = require('http'),
  httpServer = http.Server(app);

app.use(express.static(__dirname + '/build'));

app.get('/', function(req, res) {
  res.sendfile(__dirname + '/index.html');
});
app.listen(3001);
1个回答

你必须配置你的网络服务器来为你定义的所有路由提供相同的页面,或者在 React 中实现服务器端渲染。开发网络服务器可能是这样配置的,但生产服务器(Apache?Nginx?别的什么?)不是。这个问题可能会有所帮助。

之所以这样,是因为 React 用于构建单页应用程序。您有一个传统网页,它加载一些脚本——最有可能是构建过程的输出,然后这些脚本处理其他所有事情。这包括生成新的 DOM,向“服务器”发出数据请求,甚至在视图更改时通过操纵 URL 来伪造多页应用程序行为。最后一点是 react-router 所做的。

但是,Web 服务器通常不会注意到这些事情。他们知道如何提供 URL。当您请求 yourdomain.com/ 时,他们将提供该主页,但是当您请求 yourdomain.com/some/page/123 时,除非经过特殊配置,否则他们将不知道要提供什么。一种配置是还为这些其他 URL 返回主页的内容。React-router 将获取 URL 并使用正确的组件,所以一切看起来都OK>