React JS：从服务端渲染迁移到纯客户端

Question

我有一个 React 项目，该项目之前是使用节点 js 服务器设置的，它同时使用了客户端和服务器端渲染和路由。我需要移动它以便它使用纯客户端 rendering/routing。我该怎么做？

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

Answer 1

从服务器端代码中删除路由，并为任何 url 服务 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
         });
     });

应用程序的内部入口点，例如 app.jsx

var ReactDom = require('react-dom');
var Routes = require('/path/to/routes');

ReactDom.render(Routes, document.querySelector('.any-place-on-dom'));

React JS：从服务端渲染迁移到纯客户端

React JS : Migrate from server rendering to pure client side

javascript

node.js

reactjs

gulp

serverside-javascript