静态HTML

Question

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

静态HTML

首先，我有一堆静态HTML文件，每个文件都包含页面内容。示例index.html：

<p>Home</p>

然后我有一个带有HTML的layout.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

静态HTML

使用React

问题

1 个答案: