React-router多路由(React组件)

时间:2017-09-17 08:06:53

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

下面是我处理每个请求的routes.js - 这是用于反应中的服务器端渲染 - 我有以下2个文件 - 我现在得到了hello world 我的主要问题是 - 我在哪里处理其他路线?我在这里很困惑 - 如何使用静态<!Doctype><head><title></head>制作base.js - 但是使用不同的组件,例如/ about&amp; /其他取决于请求网址?请帮助我 - 这对我来说感觉像是一个很大的障碍 - 一直在尝试很多例子,但一切看起来都很复杂 -

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

1 个答案:

答案 0 :(得分:0)

您需要在基本组件中使用glGenFramebuffers(1, &framebuffer); glBindFramebuffer(GL_FRAMEBUFFER, framebuffer); glGenRenderbuffers(1, &rboColor); glBindRenderbuffer(GL_RENDERBUFFER, rboColor); glRenderbufferStorage(GL_RENDERBUFFER, GL_RGBA32F, 800, 600); glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, rboColor); glGetFramebufferAttachmentParameteriv(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_FRAMEBUFFER_ATTACHMENT_RED_SIZE, &size); 。这是一个例子:

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