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

Подробное описание того, как на стороне сервера рендерить приложение react и react-router, может стать очень большой темой.

Я предполагаю, что вы опытный пользователь и знаете, как использовать 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) {...});

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

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

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

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-адреса пользователя и метода запроса. И ваше приложение должно при запуске использовать эти данные инициализации.

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

Я работаю над примером react+react-router+redux+redux-react-router+expressjs, он не совсем готов, но работает, и вы могли видеть, как я решил серверный рендеринг:

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