具有两个参数的反应路线不适用于反应构建答案

【问题标题】：React routes with two parameters not working on react build具有两个参数的反应路线不适用于反应构建
【发布时间】：2023-03-05 19:07:01
【问题描述】：

我正在使用 react 路由器，并且在开发中一切正常，但是当我访问一些具有多个参数的路由时，react 应用程序的生产版本无法正常工作，例如 http://localhost:3000/me/edit .

我尝试在 netlify 中使用 _redirects 文件、nginx 和serve 进行部署。这三个选项都不起作用。

它似乎在请求静态文件夹中的文件。我将附上两张图片，以便您查看我所指的内容。

这是我可以在“来源”选项卡下看到的内容：

当我访问 http://localhost:3000/me 时，它工作正常，这是我在 chrome 上看到的：

当我访问 http://localhost:3000/me/edit 时，如果导致一个空白页面，并且它似乎在我内部请求一个文件 > static > edit 显然不存在；这就是我在 chrome 上看到的：

【问题讨论】：

如何生成编辑页面？如果它不存在，则 netlify 不是一个有效的选项，因为它是静态文件的托管。这确实是它在静态文件夹中查找的原因。
嘿尼古拉斯！它只是一个组件，允许登录的用户编辑他/她的个人资料。当您登录时，您将被重定向到 localhost:3000/me ，在此页面中您有一个按钮来编辑您的个人资料，如果您按下它，您将被重定向到 localhost:3000/me/edit 并且一切正常，现在如果您重新加载页面，则会出现此错误发生。
页面编辑是否存在？这就是我的观点，如果没有，那么 netlify 就不够了。静态主机需要生成的所有页面，这就是它们通常更快的原因。
是的，如果我单击将您重定向到该页面 /me/edit 的按钮，我可以访问该页面，但例如，如果我将链接粘贴到此处 localhost:3000/me/edit 并单击它，它将加载空白页
你在项目中使用 Webpack 吗？

标签： reactjs react-router

【解决方案1】：

所以，我终于可以解决这个问题了，问题是具有多个静态或动态参数的路由（例如：/me/edit 或 /user/:id）正在寻找文件夹内的文件，在本例中为 @987654325 @ 或 user 不存在。以下是我的解决方法：

我在运行 npm init 的这个文件夹中创建了一个名为“production”的文件夹，我粘贴了 react 生成的整个 build 文件夹。然后我创建了一个名为server.js 的文件（这是我指定的入口点）。该文件包含以下内容：

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

// Initializing express
const app = express()

// Initializing middleware to indicate express where to serve the static files from:
app.use(express.static(path.join(__dirname, 'build')));

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

app.use(cors())


const PORT = process.env.PORT || 4000
app.listen(PORT, () => console.log(`Server listening on port ${PORT} ?`))

此外，我在 build 文件夹中的 index.html 文件中添加了这个：<base href="/">。

在 package.json 中我添加了启动脚本 "start": "node server.js" 就是这样，输入 npm start 从未如此令人满意?

整个项目现在看起来像这样：

【讨论】：