React-router 多路由（React 组件）答案

【问题标题】：React-router multiple routes (React components)React-router 多路由（React 组件）
【发布时间】：2017-09-17 08:06:52
【问题描述】：

下面是我处理每个请求的 routes.js - 这是用于服务器端渲染的 react - 我有以下 2 个文件 - 我现在得到 hello world 我的主要问题是 - 我在哪里处理其他路线？我在这部分感到困惑 - 如何使用静态 <!Doctype><head><title></head> 制作 base.js - 但根据请求 url 使用不同的组件，如 /about 和 /other？请帮助我 - 这感觉就像对我来说是一个很大的障碍——尝试了很多例子，但一切似乎都很复杂——

routes.js

var express = require('express');
var router = express.Router();
import React, { Component } from 'react';
import ReactDOMServer from 'react-dom/server';
var ReactRouter = require('react-router');
import { renderToString } from 'react-dom/server';

router.get('*', function(request, response) {
    ReactRouter.match({
        routes: (
            <ReactRouter.Router history={ReactRouter.browserHistory}>
                <ReactRouter.Route path='/' component={require('./src/Components/layout/base')}>
                </ReactRouter.Route>
            </ReactRouter.Router>
        ),
        location: request.url
    }, function(error, redirectLocation, renderProps) {
        if (renderProps) {
            var html = ReactDOMServer.renderToString(
                <ReactRouter.RouterContext {...renderProps} />
            );
            response.send(html);
        } else {
            response.status(404).send('Not Found');
        }
    });
});

module.exports = router;

base.js

var React = require('react');
    module.exports = React.createClass({
        render: function() {
            return React.createElement('h1', null, 'Hello World!');
        }
    });

【问题讨论】：

标签： reactjs express react-router server-side-swift react-dom-server

【解决方案1】：

您需要在基本组件中使用{this.props.children}。这是一个例子：

import Header from './Header';
import React from 'react';

class Base extends React.Component {

  render() {
    return (
      <div>
        <Header />
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default Base;

然后您可以在已有的基础路由中创建子路由：

<ReactRouter.Route path='/' component={require('./src/Components/layout/base')}>

  <ReactRouter.Route path='/awesome-page' component={require('./src/Components/layout/awesome-page')}>
  </ReactRouter.Route>

</ReactRouter.Route>

【讨论】：