title: React Router isn't working properly
body: <p>I upgraded from <code>react Router v2</code> to <code>v4</code> and then everything was broken! I searched on google with errors and learned a thing that is latest version of react router is totally re-written. I tried to follow the docs for updating my app. However I copied codes from official docs and it is working perfectly But when I'm working with my components and structure it's not routing. I couldn't figure out the actual problem. everything seems OK but still it's not routing.</p>
  
  <p><strong>Update</strong></p>
  
  <p>I did figure out the problem. it was with rendering the component from <code>Route</code>. I was using <code>Component</code> in my code but it should be <code>component</code> that's why my code wasn't working. It didn't event throw an error !</p>
  
  <p><strong>This code below is working for routing</strong></p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  
  import {
    BrowserRouter as Router,
    Route,
    Link
  } from 'react-router-dom';
  
  const About = () =&gt; (
    &lt;div&gt;About page&lt;/div&gt;
  )
  const Home = () =&gt; (
   &lt;div&gt;Home component&lt;/div&gt; 
  )
  const AppComponent = () =&gt; (
   &lt;div&gt;App component is rendered as well&lt;/div&gt; 
  )
  
  render(
    &lt;Router&gt;
      &lt;div&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;Link to="/"&gt;Home&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to="/about"&gt;About&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to="/contact"&gt;Contact&lt;/Link&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;hr/&gt;
  
        &lt;Route exact path="/" component={Home}/&gt;
        &lt;Route exact path="/" component={AppComponent}/&gt;
        &lt;Route path="/about" component={About}/&gt;
      &lt;/div&gt;   
    &lt;/Router&gt;,
    document.querySelector('#app')
  )
  </code></pre>
  
  <p><strong>This code below isn't working for routes</strong></p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  
  import {
    BrowserRouter as Router,
    Route,
    Link
  } from 'react-router-dom';
  
  const SignUp = () =&gt; (
    &lt;div&gt;This is Sign up Page&lt;/div&gt;
  )
  const Home = () =&gt; (
   &lt;div&gt;Home component&lt;/div&gt; 
  )
  const AppComponent = () =&gt; (
   &lt;div&gt;App component is rendered as well&lt;/div&gt; 
  )
  
  render(
    &lt;Router&gt;
      &lt;div className="container"&gt;
          &lt;nav className="navbar navbar-default"&gt;
            &lt;div className="container-fluid"&gt;
              &lt;div className="navbar-header"&gt;
                &lt;Link to="/" className="navbar-brand"&gt;Red Dice&lt;/Link&gt;
              &lt;/div&gt;
  
              &lt;div className="collapse navbar-collapse"&gt;
                &lt;ul className="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;Link to="/signup"&gt;Sign up&lt;/Link&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
  
      &lt;Route exact path="/" Component={Home} /&gt;
      &lt;Route exact path="/" Component={AppComponent} /&gt;
      &lt;Route  path="/signup" Component={SignUp} /&gt;
    &lt;/div&gt;
  
  &lt;/Router&gt;,
    document.querySelector('#app')
  )
  </code></pre>
  
  <p>I have another question about <code>browserHistory</code>. In older version we had that but in newer version react router doesn't provide this. So what can I use in newer version to work with browserHistory?</p>