React-router複数のルート（Reactコンポーネント）

以下はすべてのリクエストを処理する私のroutes.jsです - これは反応のサーバー側のレンダリング用です - 私は次の2つのファイルを持っています - 今すぐhello worldを取得します主な問題持っているのは - 他のルートはどこで処理できますか？私はここで混乱しています - スタティック<!Doctype><head><title></head>でbase.jsを作るにはどうすればいいですか？リクエストURLに応じて/ about &/otherのような異なるコンポーネントを使っていますか？これは私にとって大きな道路ブロックのように感じている - -これで私を助けてください多くの例をしようとしているが、すべてが非常に複雑と思われる -React-router複数のルート（Reactコンポーネント）

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

出典

2017-09-17 Sam kobby

基本コンポーネント内に{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-18 05:44:26

React-router複数のルート（Reactコンポーネント）

答えて

関連する問題