2016-02-12 154 views
1

我已经反应了以前使用节点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 

回答

1

从服务器端代码删除路由和发球的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')); 
相关问题