React-router多个路由（React组件）

Question

Below are my routes.js that handles every request - this is for server side rendering in react - I have the following 2 files - I get hello world right now The main issue I have is - Where do i handle other routes? 以下是我的route.js，它处理每个请求-这是用于react中的服务器端渲染-我有以下2个文件-我现在得到了问候世界我遇到的主要问题是- 在哪里处理其他路由？ I am confused here this part - how do I make base.js with static <!Doctype><head><title></head> - but with different components like /about & /other depending upon the request url? 我在这部分感到困惑-如何使用静态<!Doctype><head><title></head>制作base.js-但根据请求的URL使用/ about和/ other等不同的组件？ please help me with this - this feels like a big road block for me - have been trying many examples but everything seems so complicated - 请帮我解决这个问题-对我来说，这似乎是一个很大的障碍-已经尝试了许多示例，但是一切似乎都非常复杂-

routes.js 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 base.js

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

Answer 1

You'll need to use {this.props.children} within your base component. 您需要在基本组件中使用{this.props.children} 。 Here's an example: 这是一个例子：

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;

Then you can create a sub-route within the base route you already have: 然后，您可以在已有的基本路由内创建一个子路由：

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

React-router多个路由（React组件）

问题描述

1 个解决方案

解决方案1
0 2017-09-18 05:44:26

React-router多个路由（React组件）

问题描述

1 个解决方案

解决方案1 0 2017-09-18 05:44:26

解决方案1
0 2017-09-18 05:44:26