我正在製作一個靜態網站並使用Gulp來處理所有文件。使用React的靜態網站

靜態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。所以在我的主要腳本被納入每一頁我寫了這個：

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巫術？

你會怎麼做？

來源

2016-01-04 chuckeles

我在這種情況下做了什麼是隻有一個HTML文件，它有應用程序。然後我將這個文件放在服務器上，始終加載，而不管實際的請求路徑是什麼。

完成後，讀取React Router上的路徑並顯示正確的組件。關鍵在於所有路由都加載了相同的HTML頁面，並且路由（決定哪個組件顯示哪裏以及哪些道具加載進來）發生在React Router內部。

來源

2016-01-04 18:58:08

問題是我想讓一個_static website_在[Github Pages]（https://pages.github.com）或[Netlify]（https://www.netlify.com/）上主持。所以你建議只需要複製主HTML文件？ – chuckeles

在這種情況下，是的。只需複製每個路線的文件。 –

大多數商業提供商都會有可以使用的重寫規則：https://www.netlify.com/docs/redirects#redirects-and-rewrite-rules - 儘管我發現最簡單的是S3 + Cloudfront。 –

使用React的靜態網站

靜態HTML

使用陣營

問題

回答

相關問題