React Router Throwing Warning: Location "/" did not match any routes

Question

I am trying to create a simple application that really doesn't do anything. I am having a hard time right off the bat with react router.

The version of react router I am using is 1.0

I keep getting an error that says

Warning: Location "/" did not match any routes

Below is my code

Main.js

import React from "react";
import ReactDOM from "react-dom";
import { IndexRoute, Router, Route, Link } from 'react-router'
import createHistory from 'history/lib/createBrowserHistory';
import Template from './modules/template'
import Index from './modules/index'
import NotFound from './modules/notfound'

let history = new createHistory();

var routes = (
    <Router history={history}>
        <Route path="/" component={Template}>
            <IndexRoute component={Index}/>
            <Route path="*" component={NotFound}/>
        </Route>
    </Router>
);

ReactDOM.render(routes, document.getElementById('glass-app'));

Index.js

import React from "react";
import RouteHandler from 'react-router';

 export default class Index extends React.Component{
  render(){
    return <div>Hello World!</div>
 }
}

Template.js

import React from "react";
import RouteHandler from 'react-router';

export default class Template extends React.Component{
 render(){
    return  <div>
                <div>My Header</div>
                <RouteHandler/>
            </div>
 }
}

NotFound.js

import React from "react";
import RouteHandler from 'react-router';

export default class NotFound extends React.Component{
  render(){
     return  <div>
        The Page You Were Looking For Can't Be Found
     </div>
  }
}

WebPack Config

var webpack = require('webpack');
module.exports = {
    entry : {
        javascript :  "./public/js/main.js",
        html : "./public/index.html"
    },
    output : {
        path : __dirname + '/dist',
        filename : 'bundle.js'
    },
    devtool: 'inline-source-map',
    devServer:{
        historyApiFallback: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    module : {
        loaders : [
            {test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/},
            {test : /\.html$/, exclude: /node_modules/, loader : 'file?name=[name].[ext]'}
        ]
    }
};

I have read many posts with similar suggestions but no luck. Any help would be appreciated.

Answer 1

I finally figured this out. In template.js file listed above I was using <RouteHandler/>. In react-router 1.0 this was replaced with {this.props.children}.