使用React的静态网站
使用React的静态网站
提问于 2016-01-04 18:52:01
我正在制作一个静态网站，并使用大口吞下处理所有的文件。
静态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.task("html", () => {
return gulp.src(["html/**/*.html", "!html/layout.html"])
.pipe(wrap({ src: project.layout }))
.pipe(gulp.dest(project.build));
});和预期的一样，它根据需要创建了所有HTML文件。
使用反应
现在我想使用反应。因此，在我的主脚本中，每一页都包含了以下内容：
import React from "react";
import { render } from "react-dom";
render((
<p>This would be some Page component...</p>
), document.body);当然，这会替换每个页面的正文内容，所以我转而使用反应路由器
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在任何需要的地方生成相同的
layout.html文件吗？(或者相当于复制文件的东西.)我需要一些文件，以便像site.me/about这样的路线工作。这就把一切都留给路由器了。 - 是否在每个页面HTML文件中呈现特定于页的组件？这意味着在
index.html文件中有这样的内容：
<script>render(<Index />, document.body);</script>- 其他的
react-router魔法？
你会怎么做？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-04 18:58:08
在本例中，我所做的就是只有一个HTML文件，其中包含应用程序。然后，我将该文件设置在服务器上，使其始终被加载，而不管实际请求路径是什么。
一旦完成，读取Reactive路由器上的路径并显示正确的组件就会像往常一样发生。关键是所有路由都加载相同的HTML页面，路由(决定要显示要加载到其中的组件以及加载到其中的支持)发生在React路由器中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34597846
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号