Я делаю статический веб-сайт и использую 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);

I предположим, что это сработает (после того, как, конечно, поместите некоторые маршруты в маршрутизатор), но для чего нужны файлы 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

Использование Реагировать

Вопросы

ответ

Смежные вопросы