如何在reactjs中重新加载页面时修复404

我在生产中遇到了reactjs问题，在我的开发机器中，我可以轻松刷新/重新加载，而无需重定向到404（未找到页面）但在生产过程中，每次我在

http://example.com/subdirectory/dashboard

它将始终转到404页，共

http://example.com

但当我在开发机器中刷新/重新加载页面时，它将按预期重新加载

---

注意：在生产中，我将静态数据上传到子目录中，因此我在路由中使用basename。

在src/index.js中添加basename，如下所示 （您还可以在index.html文件的head标记中添加

）

在http服务器中，您必须将所有URL重写为index.html文件。如果您使用的是

nginx

，您可以遵循以下步骤：

您可能需要在生产环境中为React.js应用程序创建代理服务器。您可以通过不同的方式执行此操作，但要使用Express Node.js执行此操作，您必须创建一个如下所示的文件：

const express = require('express');
const path = require('path');

const port = 7700;

const app = express();


app.use(express.static(path.join(__dirname, '../public')));

app.all('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../public/index.html'));
});

app.listen(port, () => {
  console.log(`Listening on ${port}`);
});

上面的代码段假设您已经构建了React文件，并且index.html位于

public

目录中。这将使用

*

通配符将所有来自express服务器的请求代理到您的React路由

---

完成后，只需在您的服务器上运行此express应用程序，它就可以像处理常规服务器路由一样处理历史API路由。

如果您在标准Web服务器上为应用程序提供服务，则可以使用以下启用重写规则的选项添加

.htaccess

：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

您所面临的404问题很可能会通过简单地将上述内容与项目的根一起提供而得到解决

或者，您也可以使用以下设备作为节点服务器：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

以上内容可与

.htaccess

配合使用

CreateReact应用程序人员还推广您可以找到的服务和官方react部署文档

1：

---

2:

我认为在生产中，您需要启用重写规则。非常感谢您为我节省时间

。htaccess

为我节省时间。

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);