Как использовать реагирующий маршрутизатор, реагировать и веб-пакет вместе для рендеринга на стороне сервера?

Я попытался понять, как рендерить React на стороне сервера. Я использую webpack для создания JS-пакета для клиента. Я нашел этот вопрос здесь, серверная часть (мой app.js) выглядит так:

//...other express configuration

const routes = require('../jsx/routes');
const React = require('react');
const {RoutingContext, match} = require('react-router');
const hist = require('history');

app.use((req, res, next) => {
  const location = hist.createLocation(req.path);
  match({
    routes: routes,
    location: location,
  }, (err, redirectLocation, renderProps) => {
    if (redirectLocation) {
      res.redirect(301, redirectLocation.pathname + redirectLocation.search);
    } else if (err) {
      console.log(err);
      next(err);
      // res.send(500, error.message);
    } else if (renderProps === null) {
      res.status(404)
        .send('Not found');
    } else {
      res.send('<!DOCTYPE html>' + React.renderToString(<RoutingContext {...renderProps}/>));
    }
  });
});

    //...other express configuration

Я не мог узнать, как заставить эту часть работать, так как в Node нет JSX/ES6:

res.send('<!DOCTYPE html>' + React.renderToString(<RoutingContext {...renderProps}/>));

Поэтому я попытался использовать babel/register для компиляции JSX и ES6 в app.js следующим образом в моем server.js, где мне затем требуется мой app.js:

require('babel-core/register')({
    presets: ['es2015', 'react']
});

Когда я запускаю свой сервер, я получаю тогда:

SyntaxError: /.../assets/app.scss: Unexpected token (1:0)
> 1 | @import './shared/mixins/colors';

Таким образом, obvioulsy babel/register недостаточно для отображения компонентов React, что еще я могу сделать / использовать, чтобы заставить его работать?

Источник

0 ответов

Другие вопросы по тегам