React JS:从服务器渲染迁移到纯客户端
问题描述:
我已经反应了以前使用节点js服务器设置的项目,它使用客户端和服务器端渲染和路由。我需要移动它,以便它使用纯粹的客户端渲染/路由。我该如何去做呢?React JS:从服务器渲染迁移到纯客户端
的server.js文件看起来是这样的:
var Router = require('react-router').Router;
var routes = require('./public/js/' + defaultAppName + '/' + defaultAppName + '.node.js');
app.get('*', function (req, res, next) {
var location = new Location(req.path, req.query);
try {
Router.run(routes(), location, function (e, i, t) {
var str = ReactDOMServer.renderToString(
React.createElement(Router, i));
});
} catch (e) {
console.error(e);
return next();
}
});
的目录结构看起来喜欢 -
|- server.js
|- gulpfile.js
|- public
|- js
|- app.node.js
|- src
|-jsx
| |-app
| | |-actions
| | |-components
| | |-reducers
| | |-routes
| | |-index.html
|-sass
| |-app
| | |-main
答
从服务器端代码删除路由和发球的index.html您的应用程序的任何网址并让路由由您的应用程序入口点处理。如应用的
var static_path = path.join(__dirname, 'public');
app.use(express.static(static_path));
app.get('/', function (req, res) {
res.sendFile('index.html', {
root: static_path
});
});
里面切入点e.g app.jsx
var ReactDom = require('react-dom');
var Routes = require('/path/to/routes');
ReactDom.render(Routes, document.querySelector('.any-place-on-dom'));