Javascript 反应路由器&;服务器端渲染
我目前在使用react/react路由器进行服务器端渲染时遇到了一个奇怪的问题,我就是搞不清楚。我使用ES6和Babel(6to5)进行传输 Server.js代码段Javascript 反应路由器&;服务器端渲染,javascript,node.js,reactjs,react-router,Javascript,Node.js,Reactjs,React Router,我目前在使用react/react路由器进行服务器端渲染时遇到了一个奇怪的问题,我就是搞不清楚。我使用ES6和Babel(6to5)进行传输 Server.js代码段 import routes2 from '../jsx/routes.js'; var routes = React.createElement(Router.Route, { handler: APP, path: "/" }); Router.run(routes, '/', (Handler) => { co
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)
})
输出
内容正确输出渲染组件
CONTENT2输出
由于某种原因,当我从外部文件导入路由时(这样我就可以在客户端和服务器代码中都需要路由),我的服务器端呈现无法输出正确的HTML,因此我找到了我所做的更改以使其正常工作。我的原始Routes.js文件(预传输)中的应用程序导入错误 我在用
import React from 'react';
import Router from 'react-router';
import APP from './app.js';
export default (
<Router.Route handler={APP} path="/"/>
)
从“React”导入React;
从“反应路由器”导入路由器;
从“/APP.js”导入应用程序;
导出默认值(
)
而不是
import React from 'react';
import Router from 'react-router';
import { APP } from './app.js';
export default (
<Router.Route handler={APP} path="/"/>
)
从“React”导入React;
从“反应路由器”导入路由器;
从“/APP.js”导入{APP};
导出默认值(
)
我不知道我做了什么来修复它,但我的代码现在正在按预期工作。
import React from 'react';
import Router from 'react-router';
import { APP } from './app.js';
export default (
<Router.Route handler={APP} path="/"/>
)