javascript - 如何使用我的 React 应用程序生成静态网站？

Question

所以我使用 es6 和 jsx 制作了一个 react-app。我有一个完整的组件文件夹和一堆我在不同组件中单独导入的 css 文件。我在导入 react-router 的组件之外还有一个 index.js 文件，并且有一大堆路由。

我使用 create-react-app 制作了我的应用程序，现在我找不到关于如何生成静态网站的好教程。我想我必须使用 webpack 但显然 create-react-app 已经内置了 webpack，所以我不太确定从这里去哪里。

Answer 1

GatsbyJS 是一个很棒的静态站点生成器，但我认为只使用 create-react-app 来生成可以放在静态服务器上的构建是可能的。阅读有关 serving apps with client-side-routing 的 create-react-app 文档

通常 yarn build 会生成一个构建目录，其中包含您需要放在(静态)网络服务器上的所有内容。

但是，当您将 React Router 与 browserHistory 一起使用时会出现问题。静态文件服务器不知道如何处理对特定页面的请求并将它们交给 react 路由器。

不过，您可以将 React Router 与 hashHistory 一起使用。在设置 ReactRouter 时使用它:

 <Router history={hashHistory}>

它会在您的网址末尾添加 # 个字符串(哈希字符串)。路由器使用字符串中包含的信息为请求的特定页面呈现正确的组件。这样您的服务器就不需要任何配置，您可以只使用静态服务器。

Here is some info关于浏览器历史记录(漂亮的 url)和哈希历史记录(# sign in the url)之间的区别