2016-02-12 105 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')); 
相關問題