为什么我的 React 应用程序没有在 localhost 中正确加载（损坏）？答案

【问题标题】：Why my React app is not loading correctly (broken) in localhost?为什么我的 React 应用程序没有在 localhost 中正确加载（损坏）？
【发布时间】：2020-06-01 05:29:17
【问题描述】：

我的 react 项目在 localhost 中正常工作。然后，我决定将它部署到 github 页面，它也可以在服务器上完美运行。现在，我正在尝试在 localhost 上再次处理它，但它没有正确显示。由于某种原因，照片没有加载，并且某些 css 无法正常工作，在 PowerShell 中编译后显示：

Compiled successfully!

You can now view myportfolio in the browser.

Local: http://localhost:3000/myportfolio

On Your Network: http://192.168.56.1:3000/myportfolio

Note that the development build is not optimized.

To create a production build, use npm run build.

因此，如果我访问我的 GitHub 页面，它会正确加载，但不能在 localhost（运行 npm start）中加载。

有什么建议吗？提前感谢您，如果您需要更多说明，请告诉我

【问题讨论】：

你的控制台说什么？有没有can not load resources之类的错误
@RahulDwivedi 完全没有错误。它在 github 页面上仍然可以正常工作，但在 localhost 我的 css 搞砸了。
您的本地计算机上的console 是否有任何错误？可以分享一下guthub链接吗？
@RahulDwivedi 我是 React 初学者，所以据我所知，我也没有在控制台中看到任何错误。确定项目github链接：github.com/diegosimonelli/myportfolio
是否部署在github页面上？

标签： javascript node.js reactjs

【解决方案1】：

我确实克隆了您的存储库并发现了这些问题：

你已经直接导入了很多第三方js，在index.html中给出了它们的相对路径。那是行不通的。您应该在它们之前附加%PUBLIC_URL%。例如

<script src="%PUBLIC_URL%/js/jquery.flexslider.js"></script> 和其他脚本文件类似。
但即使这样也不是你能做到的最好的。您不得尝试在 React 应用程序中使用 jquery 或第三方 js。另外，通过npm 使其成为安装相关JS 的一部分，并将它们作为包的一部分。
如果您希望 webpack 编译并使其成为你的项目。此外，该路径必须位于 src 而不是 public 文件夹中。
其他错误与keys 有关。每当您在 react 中映射和迭代列表时，您必须指定一个唯一键。

【讨论】：

感谢大家的帮助！我真的很感激！