如何在具有多個組件的頁面中使用React Router？

Question

我有這個.js文件創建幾個div並呈現一些組件並將它們分配給一個div。在這種情況下，如何使用反應路由器如果只渲染一個組件？我需要更改這個原始文件嗎？

HomePage.jsx

import React from 'react'; 
import 'bootstrap-webpack'; 

import BigPic from './components/Jumbotron'; 

import Major from './components/Major'; 
import Footer from './components/Footer'; 
import GA from './components/GA'; 
var gA = require('react-google-analytics'); 

function googleAnalytics() { 
    var ga = document.createElement('div'); 
    document.body.appendChild(ga); 
    React.render(<GA />, ga); 
    gA('create', 'UA-XXXX-Y', 'auto'); 
    gA('send', 'pageview'); 
} 

function jumbotron() { 
    //jumbotron 
    var wrapper = document.createElement('div'); 
    //set jumbotron id and class 
    wrapper.id = "big"; 
    wrapper.className = "site-wrapper"; 
    //append div 
    document.body.appendChild(wrapper); 
    const jumbotron = document.getElementById('big'); 
    React.render(<BigPic />, jumbotron); 
} 

function features() { 
    //features 
    var feature = document.createElement('div'); 
    //set features id 
    feature.id= "featured-wrapper"; 
    // append div to body 
    document.body.appendChild(feature); 
    const major = document.getElementById('featured-wrapper'); 
    React.render(<Major />, major); 
} 

function footer() { 
    //footer 
    var bottom = document.createElement('footer'); 
    //set footer id 
    bottom.id = 'footer'; 
    bottom.className = "footer-basic-centered"; 
    //append footer to bottom 
    document.body.appendChild(bottom); 
    const footer = document.getElementById('footer'); 
    React.render(<Footer />, footer); 
} 

function homepage() { 
    jumbotron(); 
    features(); 
    footer(); 
    googleAnalytics(); 
} 

homepage(); 

Answer 1

你的主要的應用程序將需要改變看起來是這樣的：

var routes = (
    <Route handler={App} path='/'> 
     <Route name='major' handler={Major} path='major'> 
    </Route> 
); 

Router.run(routes, function (Handler) { 
    React.render(<Handler/>, document.body); 
}); 

然後，您將需要更新App，包括你的超大屏幕，頁腳和GA代碼：

React.createClass({ 
    render: function(){ 
    return (
     <div> 
     <Jumbotron /> 
     <RouteHandler /> 
     <Footer /> 
     <GA /> 
     </div> 
    ); 
    } 
}); 

這裏的關鍵是RouteHandler，因爲這個w在這裏渲染子路由的組件。