Как использовать response-router 2 в качестве серверной маршрутизации с помощью expressjs?

Question

Рендеринг на стороне сервера с реакцией на маршрутизаторе. Этой документации недостаточно для понимания того, как использовать реактив-маршрутизатор 2 для рендеринга компонентов реакции с различными типами http-запросов, таких как get, post, put и т. Д. На стороне сервера.

Answer 1

Подробное описание того, как на стороне сервера рендерит приложение "реагировать и реагирует на маршрутизатор", может быть очень большой темой

Я предполагаю, что вы опытный пользователь, и вы знаете, как использовать expressjs и как создать приложение "реагировать и маршрутизировать".

Когда вы выполняете рендеринг на стороне сервера, вы можете создать отдельные серверные маршрутизаторы для сопоставления каждого маршрута веб-интерфейса или создать тот, который будет принимать все URL-адреса.

В последнем случае нужен только один серверный маршрутизатор. Где-то внизу маршрутизатора вашего сервера (до появления ошибок маршрутов) напишите:

app.use('/*', function(req, res){ ... });

этот маршрут поймает все URL.

Прежде всего нам нужна информация о URL. Нам не нужна информация о протоколе или домене, поэтому нам нужно только это:

var url = req.originalUrl;

Информация о методе (POST, GET, PUT, DELETE) мы получаем из:

var method = req. method

Если вы хотите, вы можете сделать отдельные маршруты, и у вас будет:

app.post('/something', function(req, res) {...});
app.get('/something', function(req, res) {...});

Это не имеет значения.

Во-вторых, мы не используем историю браузера для реагирующего маршрутизатора! Мы должны использовать историю памяти.

Ваш исторический объект:

var history = createMemoryHistory(req.originalUrl || '/');

И вы передаете объект истории маршрутизатору.

Мне нравится создавать свой корневой компонент, чтобы принимать его в качестве объекта истории параметров. И когда я использую его во внешнем интерфейсе, я передаю историю браузера, а когда я использую его в рендере сервера, я передаю историю памяти.

Ниже очень простой пример того, как может выглядеть маршрут рендеринга на стороне сервера (я использовал также шаблоны ejs):

router.use('/*', function(req, res){
  var history = createMemoryHistory(req.originalUrl || '/');
  var initialState = {};
  //do something with initialState according to url and request method
  var staticHTML = ReactDOMServer.renderToString(
    React.createFactory(App)({
      history,
      initialState
    })
  );

  res.render('index', {
    staticHTML,
    initialState: JSON.stringify(initialState)
  });
});

В этом примере вам нужно заполнить initState на основе URL-адреса пользователя и метода запроса. И ваше приложение должно начать использовать эти данные инициализации.

Рендеринг на стороне сервера также работает как шарм, если вы используете Redux. Потому что у нас есть один магазин и один объект состояния init. Затем вы можете передать во время рендеринга любые основные значения. Например, когда вы отображаете список объектов, вы берете его во внешний интерфейс и переходите в состояние init, а затем выполняете рендеринг. Тогда отображаемая страница будет иметь значения.

Я работаю в примере "реагируй + реагируй-роутер + редукс + редукс-реагируй-роутер + экспресс-сценарий", он не полностью готов, но работает, и ты мог увидеть, как я решил рендеринг сервера:

https://github.com/uhlryk/my-express-react-seed