使用 create-react-app 部署 github 页面时出现 React-router 问题 [关闭]

Posted 2023-02-21

【中文标题】使用 create-react-app 部署 github 页面时出现 React-router 问题 [关闭]

【英文标题】：React-router issues with deploying github pages, with create-react-app [closed]

【发布时间】：2017-03-17 17:45:07

【问题描述】：

我很难将一个简单的 React 应用程序部署到 github 页面。您将一个文件移动到错误的目录，它会抛出整个过程。

运行 npm run build 后我该怎么办？

这会将我所有的文件放入构建文件夹中，但浏览器仍然不断给我 404 错误，认为在初始 url 路由的“/”之后键入的任何内容都是在从服务器查找实际文件。我只想将 / 之后的任何内容用作我在 React Router 中设置的路由... :(

【参考方案1】：

Create-React-App 有详细的文档说明如何将您的构建部署到 Github Pages 和 Heroku。你可以阅读它here。 "Notes on client-side routing" 部分介绍了您的具体问题。

【讨论】：

嘿。感谢您的回复。这是我遵循的确切教程。我认为这与浏览器如何解释文件有关。例如，我的应用程序使用 react-router，当我想去一个新路由时，即 /user/5/dashboard，我得到一个错误 404，因为我认为浏览器正在寻找根服务器，然后是一个文件夹认为应该被称为用户，然后是一个名为 5 的文件夹，然后是另一个名为仪表板的文件夹。 Tbh 我按照对 TEE 的反应教程进行操作，但浏览器（chrome）仍然不断给我错误 404。我不知道为什么。

React 是用于前端的，因此 react-router 仅提供前端路由解决方案，因此您的后端不知道路由。 This question and answers 很好地解释了这些概念。

是的，问题是服务器只会在根目录中为您的构建服务。您还需要配置您的服务器以在其他路由中为您的构建服务。这无法通过 Github Pages 实现，因为它们不支持 react-router 的 browserHistory 选项，您可以通过我上面提到的几种方法来修复它。对于 Heroku，您可以使用 react-router 文档中的类似设置设置 node.js + express 服务器。

@user7024499 您可以使用 react 路由器设置哈希路由器，或者像 Khang 建议的那样，使用 heroku 设置一个服务器，将所有请求定向到 index.html

这个答案应该不仅仅是一个链接。 “始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。” ***.com/help/how-to-answer