0

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

路由.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!');
        }
    });
4

1 回答 1

0

您需要{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>
于 2017-09-18T05:44:26.953 回答