title: Routing is not working in Reactjs + ES6
body: <p>When I am clicking on the link "cake" I am getting the error the path is not matched or server is not able to find.</p>
  
  <p>Here is my code for 3 files - Router, Navigation and detail components</p>
  
  <p>Routers.js- component handling the routing</p>
  
  <hr>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Router, Route , HashHistory , IndexRoute , useRouterHistory} from 'react-router';
  import History from 'history';
  import {CreateHashHistory} from 'history';
  import createBrowserHistory from 'history/lib/createBrowserHistory';
  import { browserHistory } from 'react-router';
  
  import Base from './Base.jsx';
  import ListDetail from './ListDetail.jsx';
  
  let Routes = 
  
          &lt;Router history={browserHistory}&gt;
              &lt;Route path="/" component={Base} &gt;
                  &lt;Route path="/cake" component= {ListDetail}&gt;&lt;/Route&gt;
  
              &lt;/Route&gt;
          &lt;/Router&gt;
  
   export default Routes;
  </code></pre>
  
  <hr>
  
  <p>Navigation components - handling the navigaton links</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Link } from 'react-router';
  
  
  class ContentList extends React.Component {
      render(){
          return(
              &lt;div id="innercontent"&gt;
              &lt;h2&gt;What you love?&lt;/h2&gt;
              &lt;ul &gt;
                  &lt;Link to={'/cake'}&gt;Cakes&lt;/Link&gt;
                  &lt;Link to={'/icecream'}&gt;icecream&lt;/Link&gt;
                  &lt;Link to={'/browin'}&gt;browin&lt;/Link&gt;
              &lt;/ul&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default ContentList;
  </code></pre>
  
  <hr>
  
  <p>Detail Component - Detail page to display</p>
  
  <pre><code>import React from 'react';
  
  import ReactDOM from 'react-dom';
  
  class ListDetail extends React.Component {
      render(){
          return(
              &lt;div&gt;
              &lt;h1&gt;hi Details&lt;/h1&gt;
  
  
              &lt;/div&gt;
          )
      }
  }
  
  
  export default ListDetail;
  </code></pre>
  
  <hr>
  
  <p>Base.JSX</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Header from './header.jsx';
  import Footer from './footer.jsx';
  import ContentList from './contentList.jsx';
  import FormElement from './form.jsx';
  import ListDetail from './ListDetail.jsx';
  
  class Base extends React.Component {
      render(){
          return(
              &lt;div&gt;
              &lt;Header name="My Recipe Book"/&gt;
              &lt;section id="content"&gt;
              &lt;FormElement /&gt;
               &lt;ContentList /&gt;
              &lt;/section&gt;
              &lt;Footer /&gt;
              &lt;ListDetail /&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <h2>    export default Base;</h2>
  
  <p>Main.jsx</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Routes from './router.jsx';
  
  ReactDOM.render(Routes, document.getElementById('app'));
  </code></pre>
  
  <p>Thanks for the help!!</p>