javascript - 如何在具有多个组件的页面中使用 React Router？

Question

我有这个 .js 文件，它创建多个 div 并呈现一些组件并将它们分配给一个 div。在这种情况下，如果它只渲染一个组件，我该如何使用react router？我需要更改这个原始文件吗？

主页.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);
});

然后，您需要更新应用以包含您的大屏幕、页脚和 GA 代码:

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

这里的关键位是RouteHandler，因为这将在此处呈现子路由的组件。