使用 React 的静态网站

Question

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

静态HTML

首先我有一堆静态 HTML 文件，每个文件都有页面的内容。例子 index.html:

<p>Home</p>

然后我有一个 layout.html 文件，其中 HTML 每个页面都相同。它看起来像这样：

<!DOCTYPE html>
<html lang="en">

  <head>
    <link rel="stylesheet" href="assets/styles.min.css">
  </head>

  <body>
    <div id="contents">
      <%= contents %>
    </div>

    <script src="assets/scripts.min.js"></script>
  </body>

</html>

然后，在 gulpfile 中，我将使用 gulp-wrap 插件处理页面，如下所示：

gulp.task("html", () => {
  return gulp.src(["html/**/*.html", "!html/layout.html"])
    .pipe(wrap({ src: project.layout }))
    .pipe(gulp.dest(project.build));
});

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

使用 React

现在我想使用 React。因此，在包含在每个页面中的主脚本中，我这样写：

import React      from "react";
import { render } from "react-dom";

render((
  <p>This would be some Page component...</p>
), document.body);

这当然会替换每个页面的正文内容，所以我转向 react-router:

import React                             from "react";
import { render }                        from "react-dom";
import { Router, Route, browserHistory } from "react-router";

render((
  <Router history={ browserHistory }>
  </Router>
), document.body);

我想这会起作用（当然是在将一些路由放入路由器之后），但是 HTML 文件有什么用？

问题

如何使用 HTML 文件？我是否会将它们留空以便 Gulp 在需要的地方生成相同的 HTML 文件 layout.html？（或等同于复制文件的东西......）我需要一些文件，以便像 site.me/about 这样的路由工作。这会将一切留给路由器。
我是否在每个页面 HTML 文件中呈现页面特定的组件？这意味着在 index.html 文件中有这样的东西：

<script>render(<Index />, document.body);</script>

其他一些 react-router 魔法？

你会怎么做？

Answer 1

我在这种情况下所做的是只有一个 HTML 文件，其中包含应用程序。然后我在服务器上设置这个文件总是被加载，不管实际的请求路径是什么。

完成后，读取 React Router 上的路径并显示正确的组件会像往常一样发生。关键是所有路由都加载相同的 HTML 页面并且路由（决定哪个组件显示在哪里以及加载哪些道具）发生在 React Router 中。

使用 React 的静态网站

Static website using React

reactjs

gulp

react-router

static-site

静态HTML

使用 React

问题