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

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会生成一个构建目录，其中包含您需要放在（静态）Web服务器上的所有内容。

使用带有browserHistory的React路由器时会出现问题。静态文件服务器不知道如何处理特定页面的请求并将其移交给路由器做出反应。

但是，您可以将React路由器与hashHistory一起使用。设置ReactRouter时使用它：

 <Router history={hashHistory}>

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

Here is some info关于浏览器历史记录（好看的网址）和哈希历史记录（网址中的＃符号）之间的差异