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

Question

我正在使用 React 路由器来定义路由。我正在使用 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);

Answer 1

您必须将您的网络服务器配置为为您定义的所有路由提供相同的页面，或者在 React 中实现服务器端呈现。开发网络服务器可能是这样配置的，但生产服务器（Apache？Nginx？其他？）不是。可能会有帮助。

之所以这样，是因为 React 用于构建单页应用程序。你有一个传统的网页，它加载了一些脚本——很可能是你构建过程的输出，然后这些脚本会处理其他一切。这包括生成新的 DOM、向 "server" 请求数据，甚至在视图更改时通过操纵 URL 来伪造多页面应用程序行为。最后一点是 react-router 所做的。

然而，Web 服务器通常不会注意到这些事情。他们知道如何服务 URLs。当您请求 yourdomain.com/ 时，他们将提供该主页，但当您请求您的域时。com/some/page/123 他们将不知道要提供什么，除非进行特殊配置。一种配置是 return 这些其他 URL 主页的内容。 React-router 将选择 URL 并使用适当的组件，因此一切看起来都正常>

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

React routes are not working in facebook's create-react-app build

javascript

reactjs

react-router

react-router-redux

create-react-app