Question

我正在创建一个带有react和nodejs的isomprphic商店。我的问题是如何使用SERVER SIDE上的初始数据填充我的组件。我知道如何用初始数据填充我的主页组件，我在＆＃34; /＆＃34;中获取数据路由并将它们作为道具传递给我的组件。但其他路线怎么样？我可以定义多个服务器端路由，但我的网站不再是SPA。如何在服务器端获得反应路由器客户端路由和启动数据的好处？

Answer 1

redux可以节省你一些时间来做这件事。或者您可以在服务器上计算状态并将其填充为json到您的州商店thourgh app的道具。

React路由器很容易同构，但无论如何你必须通过你的状态。

http://redux.js.org/

这是我的示例index.jsx with react router w / o redux：

"use strict";
import React from 'react';
import { render } from 'react-dom';
import { match, Router, browserHistory } from 'react-router';

const injectTapEventPlugin = require('react-tap-event-plugin');
injectTapEventPlugin();

//for dev tools
window.React = React;

const routes = require('./Routes.jsx');

const history = browserHistory;
match({history, routes}, (error, redirectLocation, renderProps) => {
    render(<Router {...renderProps} />, document.getElementById('app'));
})

在Routes.jsx中你可以找到类似的东西：

"use strict";
const React = require('react');
import { Router, Route, Link, IndexRoute } from 'react-router'

const Layout = require("./components/Layout.jsx");
const Login = require("./components/Login.jsx");
const Home = require("./components/Home.jsx");
const NotFound = require("./components/NotFound.jsx");

const routes = (
    <Route path="/" component={Layout}>
        <IndexRoute component={Home}/>
        <Route path="login" component={Login}/>
        <Route path="*" component={NotFound}/>
    </Route>
);

module.exports = routes;

Answer 2

我在服务器端使用以下组件用于带有react-router的SPA，在ReactDOMServer.renderToString（）中传入位置prop和初始状态对象

参考：React-Router Server Rendering docs

import React, { Component } from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import reducers from '../reducers';
import routes from '../routes';
import { match, RoutingContext } from 'react-router';

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let reducer = combineReducers(reducers);
    let store = createStore(reducer, this.props);
    var component;

    match({ routes, location: this.props.location }, function (error, redirectLocation, renderProps) {
      if (error) {
        component = <p>{error.message}</p>;
      } else if (renderProps) {
        component = <RoutingContext {...renderProps} />;
      } else {
        component = <p>404 not found</p>;
      }
    })

    return (
      <Provider store={store}>
        {component}
      </Provider>
    )
  }
}

Answer 3

这是一个真实的同构应用程序https://github.com/WebbyLab/itsquiz-wall，所有这些问题已经解决了。

此处涉及的数据填充问题https://github.com/WebbyLab/itsquiz-wall/blob/master/server/app.js

这是关于处理同构问题的博文 - "The Pain and the Joy of creating isomorphic apps in ReactJS"

反应同构和初始数据

3 个答案: