React 路由器和服务器端渲染答案

【问题标题】：React router & serverside rendingReact 路由器和服务器端渲染
【发布时间】：2015-04-19 12:56:08
【问题描述】：

我目前在使用 react / react-router 进行服务器端渲染时遇到了一个奇怪的问题，我根本无法弄清楚。我正在使用 ES6 和 Babel (6to5) 进行转译

Server.js sn-p

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

【问题讨论】：

我不知道我做了什么修复了它，但我的代码现在按预期工作。

标签： javascript node.js reactjs react-router

【解决方案1】：

所以我发现了我所做的改变以使事情正常进行。我的原始 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="/"/>
)

【讨论】：