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

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

本文关键字：构建 不起作用 create-react-app 路由 facebook React      更新时间：2023-09-26

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

我使用一个简单的express服务器托管生产构建

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);

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

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

然而，web服务器通常忽略了这些事情。他们知道如何提供url。当你请求yourdomain.com/时，他们会提供主页，但当你请求yourdomain.com/some/page/123时，他们不知道该提供什么，除非特别配置。一种配置是也返回这些其他url的主页的内容。React-router会获取URL并使用适当的组件，所以一切看起来都没问题

相关文章：