Component not rendering with ReactJS and React Router?

Question

Building a web app using Meteor and React, and I'm trying to render two views within React, and the index component won't render... unsure why. The 'Two' component does. Here is my routes.jsx:

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

import { Index } from '../../ui/components/index.jsx';
import { Two } from '../../ui/pages/two.jsx';

Meteor.startup( () => {
  render( 
    <Router history={ browserHistory }>
       <Route path="/" component={ Index } />
       <Route path="/two" component={ Two } />
    </Router>, 
    document.getElementById( 'react-root' ) 
  );
});

Index.jsx:

import React, { Component } from 'react';

export default class Index extends Component {
    render() {
        return(
        <Index className="container">
            <header>
                <h1>Todo List</h1>
            </header>
        </Index>
        ); 
    }
}

Two.jsx:

import React from 'react';

export const Two = () => <h3>Two</h3>;

What's going on? Any help appreciated!

Answer 1

You shouldn't be rendering Index inside Index component.

this

import React, { Component } from 'react';

export default class Index extends Component {
    render() {
        return(
        <Index className="container">
            <header>
                <h1>Todo List</h1>
            </header>
        </Index>
        ); 
    }
}

should be

import React, { Component } from 'react';    

export default class Index extends Component {
    render() {
        return(
        <div className="container">
            <header>
                <h1>Todo List</h1>
            </header>
        </div>
        ); 
    }
}

In addition as you are exporting Index as the default export, you should use

import Index from '../../ui/components/index.jsx';

or

import {default as Index} from "../../ui/components/index.jsx"

instead of using explicit named export import { Index } ..