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

Posted 2023-02-22

【中文标题】React 路由在 facebook 的 create-react-app 构建中不起作用

【英文标题】：React routes are not working in facebook's create-react-app build

【发布时间】：2017-02-08 21:47:55

【问题描述】：

我正在使用 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);

【问题讨论】：

哪个网址？主要页面 - yourdomain.com/ 或子页面 - yourdomain.com/some/page/123？

@HoriaComan 子页面

【参考方案1】：

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

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

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

【讨论】：

更具体地说，作者希望在服务于index.html 的处理程序中将/ 更改为/*。