1

現在、react / react-router を使用したサーバー側のレンダリングで奇妙な問題が発生していますが、これは単に理解できません。トランスパイルにBabel（6to5）でES6を使用しています

Server.js スニペット

import routes2 from '../jsx/routes.js';
var routes = React.createElement(Router.Route, { handler: APP, path: "/" });

Router.run(routes, '/', (Handler) => {
    const CONTENT = React.renderToString(<Handler/>);
    console.log('\r\nroutes')
    console.log(CONTENT)
})

Router.run(routes2, '/', (Handler) => {
    const CONTENT2 = React.renderToString(<Handler/>);
    console.log('\r\nroutes2')
    console.log(CONTENT2)
})

Routes.js

"use strict";

var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };

var APP = _interopRequire(require("./app.js"));

var React = _interopRequire(require("react"));

var Router = _interopRequire(require("react-router"));

module.exports = React.createElement(Router.Route, { handler: APP, path: "/" });

出力

CONTENT はレンダリングされたコンポーネントを正しく出力します

CONTENT2 出力<noscript></noscript>

何らかの理由で、外部ファイルからルートをインポートすると (クライアント コードとサーバー コードの両方でルートを要求できるようになります)、サーバー側のレンダリングで正しい HTML が出力されません。

4

1 に答える 1

0

それで、物事を機能させるために何を変更したかを見つけました。元の Routes.js ファイル (トランスパイル前) で APP インポートが間違っていた

使っていました

import React from 'react';
import Router from 'react-router';
import APP from './app.js';

export default (
    <Router.Route handler={APP} path="/"/>
)

それ以外の

import React from 'react';
import Router from 'react-router';
import { APP } from './app.js';

export default (
    <Router.Route handler={APP} path="/"/>
)
于 2015-02-18T14:18:14.427 に答える