0

所以我继承了一个完整的项目，该项目遵循一些非正统的服务器端渲染方法，如下所述：Client Routing (using react-router) and Server-Side Routing

现在我在过去一周一直在尝试升级它，并且可能浪费了 40 多个小时而无处可去，同时我试图将这个烂摊子带到正确的当前状态。它使用 react 0.13.3，我想升级到至少 0.14.7 和 react-router 2，但无论我如何尝试解决这个问题，结构都非常脆弱，以至于我一次又一次地失败。这就是我所拥有的：

客户：

import React from "react";
import Router from "react-router";
import routes from "../shared/routes";

Router.run(routes, Router.HistoryLocation, (Handler, state) => {
  React.render(<Handler email =          {window.INITIAL_PROPS.email}
      urlData =        {window.INITIAL_PROPS.urlData}
      tagData =        {window.INITIAL_PROPS.tagData}
      talentData =     {window.INITIAL_PROPS.talentData}
      talentShowcase = {window.INITIAL_PROPS.talentShowcase}
      metrics =        {window.INITIAL_PROPS.metrics}
      loginData =      {window.INITIAL_PROPS.loginData}
      errorData =      {window.INITIAL_PROPS.errorData} />, document.getElementById('app'));
});

服务器：

import express from "express";
var session = require("express-session");
var zip = require('express-zip');
var bodyParser = require("body-parser");
var multer = require("multer");

import React from "react";
import Router from "react-router";
import routes from "../shared/routes";

const app = express();

app.set('views', './views');
app.set('view engine', 'jade');

var constants = require('../constants');

// Server Modules
var Index = require('./serverModules/Index');
var Search = require('./serverModules/Search');
var Admin = require('./serverModules/Admin');
var User = require('./serverModules/User');

app.use(express.static(__dirname + '/../../public/'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(multer({dest: __dirname + '/../../public/' + 'assets/images/'}).single('Profile'));

app.use(session({
  secret: 'test session',
  resave: false,
  saveUninitialized: true
}));

Index(app, Router, routes, React);
Search(app, Router, routes, React);
Admin(app, Router, routes, React);
User(app, Router, routes, React);

// Redirect to Index Page on linking to a page which does not exist.
app.use(function (req, res, next) {

  res.redirect("/");
});

app.listen(process.env.PORT, function () {

  console.log('Server listening at port %s', process.env.PORT);
});

serverModules（???）“索引”之一：

var constants = require('../../constants');
var functions = require('../serverFunctions');

// Database & API Wrappers
var database = require('../database/databaseWrapper');
var smAPI = require('../socialMediaAPIs/socialMediaWrapper');

module.exports = function (app, Router, routes, React) {
  app.get('/', function (req, res) {
    var urlData = req.query;
    var session = req.session;
    var loginData = {};
    var email = undefined;
    // Check if the user is logged in.
    if (session.user === undefined) {
      res.redirect('/Login');
      return;
    } else {
      email = session.user.email;
      if (session.user.permissions !== undefined) {
        for (var i = 0; i < session.user.permissions.length; ++i) {
          loginData[session.user.permissions[i]] = true;
        }
      }
    }
    // Store the size of the talent list if it exists
    if (session.user.lists !== undefined) {
      urlData.lists = [];
      for (var i = 0; i < session.user.lists.length; ++i) {
        urlData.lists.push({name: session.user.lists[i].name, size: functions.getListSize(session.user.lists[i].talents)});
      }
    }
    Router.run(routes, req.url, Handler => {
      database.getIndexParams(function (tags, talents) {
        // Client-side variables.
        var props = {
          urlData: urlData,
          tagData: tags,
          loginData: loginData,
          email: email
        };
        let content = React.renderToString(
          <Handler
            urlData={urlData}
            tagData={tags}
            loginData={loginData}
            email={email}
          />
        );
        res.render('index', {
          scontent: content,
          props: JSON.stringify(props),
          title: "Project"
        });
      });
    });
  });
};

路线：

import { Route, DefaultRoute } from "react-router";
import React from "react";

import AppRouter from "./components/AppRouter";
import AppHandler from "./components/AppHandler";
import SearchHandler from "./components/SearchHandler";
import AdminHandler from "./components/AdminHandler";
import AddUserHandler from "./components/AddUserHandler";
import LoginHandler from "./components/LoginHandler";
import PasswordHandler from "./components/PasswordHandler";
import ForgotPasswordHandler from "./components/ForgotPasswordHandler";

export default (
    <Route name="root" handler={ AppRouter } path="/">
        <DefaultRoute handler={ AppHandler } />
        <Route name="Search" handler={ SearchHandler } path="Search" />
        <Route name="Admin" handler={ AdminHandler } path="Admin" />
        <Route name="AddUser" handler={ AddUserHandler } path="Admin/AddUser" />
        <Route name="Login" handler={ LoginHandler } path="Login" />
        <Route name="Password" handler={ PasswordHandler } path="ChangePassword" />
        <Route name="ForgotPassword" handler={ ForgotPasswordHandler } path="ForgotPassword" />
    </Route>
);

应用路由器：

import React from "react";
import { RouteHandler } from "react-router";

export default class AppHandler extends React.Component {
  render() {
    return (
      <RouteHandler
        email={this.props.email}
        urlData={this.props.urlData}
        tagData={this.props.tagData}
        talentData={this.props.talentData}
        talentShowcase={this.props.talentShowcase}
        metrics={this.props.metrics}
        loginData={this.props.loginData}
        errorData={this.props.errorData}
      />
    );
  }
}

应用程序处理程序：

import React from "react";

var SearchHeader = require('./index/SearchHeader');
var User = require('./index/User');
var Footer = require('./Footer');

export default class AppHandler extends React.Component {
  render() {
    return (
      <div>
        <div id="backgroundWrapper">
          <div id="container">
            <SearchHeader
              urlData={this.props.urlData}
              tagData={this.props.tagData}
              loginData={this.props.loginData}
              email={this.props.email}
              tagLine={true}
              minHeight={640}
            />
            <User userData={this.props.talentShowcase}/>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}

这就是 LoginHandler 的样子：

import React from "react";

var Watermark = require('./Watermark');
var Login = require('./login/Login');
var Footer = require('./Footer');

export default class AppHandler extends React.Component {
  render() {
    return (
      <div id="content">
        <div id="backgroundWrapper" style={{ "height": "100%" }}>
          <div id="LoginWatermarkContainer">
            <Watermark black={true}/>
            <span id="LoginSubtitle">
              Login with your credentials below.
            </span>
            <div className="LoginWatermarkSeparator"></div>
          </div>
          <Login errorData={this.props.errorData}/>
        </div>
        <Footer positionStyle={{ "bottom": "0", "position": "fixed" }}/>
      </div>
    );
  }
}

如何升级它，最好升级到最新版本，如果可能，请逐步显示解决方案，因为我在一个多星期未能升级后感到非常愚蠢。我以前见过疯狂而脆弱的设置，但到目前为止，这很成功。我真的很沮丧，请帮助！

4

0 回答 0