0

したがって、ここで概説されているように、サーバー側レンダリングのいくつかの非正統的な方法に従うプロジェクトの完全な混乱を継承しました:クライアントルーティング (react-router を使用) およびサーバー側ルーティング

今、私は先週それをアップグレードしようとしてきましたが、この混乱を適切かつ現在の状態にしようとしている間、おそらく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(???)「インデックス」の1 つ:

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>
);

AppRouter:

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}
      />
    );
  }
}

AppHandler:

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>
    );
  }
}

これをどのようにアップグレードしますか、できれば最新バージョンにアップグレードします。可能であれば、段階的な解決策を示してください。1 週間以上アップグレードに失敗した後、私はかなり愚かだと感じているからです。私は以前にクレイジーで壊れやすいセットアップを見たことがありますが、これははるかに簡単です. 本当に困っています、助けてください！

4

0 に答える 0