Reactjs 使用React的静态网站

我正在制作一个静态网站，并使用它来处理所有文件

静态HTML 首先，我有一堆静态HTML文件，每个文件都有页面的内容。示例

index.html

：

主页

然后我有了一个

layout.html

文件，其中的html对于每个页面都是相同的。看起来是这样的：

然后，在

gulpfile

中，我将使用如下插件处理页面：

gulp.task（“html”，（）=>{
返回gulp.src（[“html/***.html”，“！html/layout.html”]）
.pipe（包裹（{src:project.layout}））
.管道（吞咽目的地（项目建设））；
});

正如预期的那样，这创建了所有需要的HTML文件

使用React 现在我想用。因此，在我的主脚本中，我在每页中都写了以下内容：

从“React”导入React；
从“react dom”导入{render}；
渲染((
这将是一些页面组件

)，文件正文）；

当然，这将替换每个页面的正文内容，因此我转向：

从“React”导入React；
从“react dom”导入{render}；
从“react Router”导入{Router，Route，browserHistory}；
渲染((
)，文件正文）；

我想这是可行的（当然，在将一些路由放入路由器之后），但是HTML文件是用来做什么的呢

问题

• 如何使用HTML文件？我是否将它们留空，以便Gulp在需要的地方生成相同的HTML文件

  layout.HTML

  ？（或与复制文件相同的内容…）我需要一些文件，以便像

  site.me/about

  这样的路由可以工作。这将使一切由路由器决定
• 我是否在每个页面HTML文件中呈现特定于页面的组件？这意味着在

  index.html

  文件中有类似的内容：

render（，document.body）；

• 其他的

  反应路由器

  魔法

---

您将如何做到这一点？

在本例中，我所做的是只有一个HTML文件，其中包含应用程序。然后，我在服务器上设置此文件，使其始终被加载，而不管实际的请求路径是什么

---

一旦完成，读取React路由器上的路径并显示正确的组件将照常进行。关键是所有的路由都加载相同的HTML页面，路由（决定哪个组件显示在哪里，哪些道具加载到其中）发生在React Router内部。

问题是，我想让一个静态网站在或上托管。所以你建议在需要的地方复制主HTML文件？在这种情况下，是的。只需为每个路由复制文件。大多数商业提供商都有可以使用的重写规则：-但我发现最简单的是S3+Cloudfront。阅读后，我想这会起作用（

\u重定向

文件）：

/*/index.html 200

。谢谢