How can I use React Router in a page with multiple components?

Question

I have this .js file that creates several divs and renders a few components and assigns them to a div. How can I use react router in this case if it only renders one component? Do I need to change this original file?

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();

Clarkie · Accepted Answer · 2015-09-01 12:27:32Z

1

Your main app will need to be changed to look something like this:

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

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

You will then need to update App to include your jumbotron, footer and GA code:

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

The key bit here is RouteHandler as this will render the subroute's component here.

answered Sep 1, 2015 at 12:27

Clarkie

7,5709 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Username Over a year ago

I don't completely understand. What is the purpose of this <Route name='major' handler={Major} path='major'> and why did you put Major in there?

Clarkie Over a year ago

That's so that when you hit #/major it will load your Major component in to the RouteHandler component.

Collectives™ on Stack Overflow

How can I use React Router in a page with multiple components?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related