Статический сайт с использованием React

Я делаю статический веб-сайт и использую 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. Итак, в моем основном скрипте, который включается на каждую страницу, я написал следующее:

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 волшебство?

Как бы вы это сделали?


reactjs react-router gulp static-site
person martindzejky    schedule 04.01.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что я сделал в этом случае, так это имел только один HTML-файл, содержащий приложение. Затем я настроил этот файл на сервере так, чтобы он всегда загружался независимо от фактического пути запроса.

Как только это будет сделано, чтение пути в React Router и отображение правильных компонентов происходит как обычно. Суть в том, что все маршруты загружают одну и ту же HTML-страницу, а маршрутизация (решая, какой компонент показать, где и какие реквизиты загрузить в него) происходит внутри React Router.

person Sudhir Jonathan    schedule 04.01.2016
comment
Проблема в том, что я хочу создать статический веб-сайт для размещения на Github Pages или Netlify. Итак, вы предлагаете просто дублировать основной файл HTML везде, где это необходимо? - person martindzejky; 04.01.2016
comment
В таком случае да. Просто дублируйте файл для каждого маршрута. - person Sudhir Jonathan; 04.01.2016
comment
У большинства коммерческих провайдеров есть правила перезаписи, которые вы можете использовать: netlify.com/docs /redirects#redirects-and-rewrite-rules — самый простой способ, который я нашел, это S3 + Cloudfront. - person Sudhir Jonathan; 04.01.2016
comment
Прочитав документацию Netlify, я думаю, это сработает (_redirects файл): /* /index.html 200. Спасибо! - person martindzejky; 04.01.2016