代码已部署，但页面为空白-部署使用Nginx和github页面上的create react app创建的react应用

Question

我试图将使用create react app创建的react app部署到

1.nginx 2.github页面

在两种情况下，选项卡中仅显示React应用程序徽标和标题，但页面正文中未显示任何内容。 （即使已部署代码，页面仍为空白）

有人知道为什么会这样吗？

Answer 1

这是由于您在react项目中使用了Browser Router引起的。

GitHub Pages和nginx都通过非根文件夹（即username.github.io/repo-name/）而非根文件夹（即username.github.io/）为您的应用提供服务。 React Router不会将您应用的URL视为与您在应用中定义的任何路由的匹配项。

例如，如果您使用<Route exact path="/" component={SomeComponent} />定义路由，React Router将发现/和/repo-name/ 不完全匹配 ，因此不会渲染该组件。

要解决此错误，请在BrowserRouter中使用基本名称prop并根据非根文件夹名称对其进行命名。

示例：-如果您的应用位于服务器中名为“ folder1”的文件夹中，请执行以下操作。

希望我的回答可以帮助遇到同样问题的人加油！ @iii @ R2B