title: React Link Doesn't working
body: <p>I just started to learn react js and created a sample app, in which application has header, footer with content. To add header footer on each page I created root.js and include header, footer there. 
  as props.children can render each nested route I added <code>{this.props.children}</code> inside root.js.</p>
  
  <p>But When I clicked on any Links, nothing is happening, previous page(home) still rendered.</p>
  
  <p>I could not understand whats going on and how to resolve this. Please help me, It already took me 2 days searching on google.   </p>
  
  <p><strong>Edit</strong>:</p>
  
  <p>Now working fine. Problem was that I added links inside </p>
  
  <p>But now another problem is happening.
  whenever I refresh page everything has gone. <strong>pages are not found</strong> shows</p>
  
  <p><strong>Edit</strong>:</p>
  
  <p>Now working after page refresh by adding these line in </p>
  
  <pre><code>package.json
  
  "scripts": {
      "start": "npm run build",
      "build": "webpack -d &amp;&amp; cp src/index.html dist/index.html &amp;&amp; webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
      "build:prod": "webpack -p &amp;&amp; cp src/index.html dist/index.html"
  }
  </code></pre>
  
  <p><strong>index.js</strong> </p>
  
  <pre><code>import React from "react";
  import { render } from "react-dom";
  import { Home } from "./pages/home/index.jsx";
  import { Root } from "./component/layout/root";
  import { Blog } from "./pages/blog/index.jsx";
  import { About } from "./pages/about/index.jsx";
  import { Contact } from "./pages/contact/index.jsx";
  import { Portfolio } from "./pages/portfolio/index.jsx";
  import { Services } from "./pages/services/index.jsx";
  import { Match } from 'react-router'; 
  import {BrowserRouter as Router, Route} from 'react-router-dom'
  import {IndexRoute, browserHistory, Switch } from 'react-router';
  
  class App extends React.Component {
      render(){
          return(
              &lt;Router&gt;
                  &lt;Root&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path={"/"} component={Home} /&gt;
                          &lt;Route path="/blog" component={Blog}/&gt;
                          &lt;Route path="/contact" component={Contact}/&gt;
                          &lt;Route path="/portfolio" component={Portfolio}/&gt;
                          &lt;Route path="/about" component={About}/&gt;
                          &lt;Route path="/services" component={Services}/&gt;
                          &lt;Route path="/home" component={Home} /&gt;
                      &lt;/Switch&gt;
                  &lt;/Root&gt;
              &lt;/Router&gt;
          );
      }
  }
  
  render( &lt;App /&gt; , window.document.getElementById("app"));
  </code></pre>
  
  <p><strong>root.js</strong></p>
  
  <pre><code>import React  from 'react';
  import { render } from 'react-dom';
  import { Header } from './header/index';
  import { Footer } from './footer/index';
  
  export class Root extends React.Component {
      constructor(props){
          super();
      }
  
      render(){
          return( 
              &lt;div&gt;
                  &lt;Header/&gt;
                  {this.props.children}
                  &lt;Footer/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>Components</strong>:</p>
  
  <pre><code>/blog/index.jsx
  /home/index.jsx
  /contact/index.jsx
  
  
  
  
  import React from "react";
  import {render} from "react-dom";
  
  export class Contact extends React.Component {
      render() {
          return (
      &lt; div id = "fh5co-contact-section" &gt; 
      &lt;div className="container"&gt;
      &lt;div className="row"&gt;
          &lt;div className="col-md-6 col-md-offset-3 text-center fh5co-heading"&gt;
              &lt;h2&gt;Contact&lt;/h2&gt;
              &lt;p&gt;
                  &lt;span&gt;Created with
                      &lt;i className="sl-icon-heart"&gt;&lt;/i&gt;
                      by the fine folks at
                      &lt;a href="http://freehtml5.co"&gt;FreeHTML5.co&lt;/a&gt;
                  &lt;/span&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="row"&gt;
          &lt;div className="col-md-3"&gt;
              &lt;h3&gt;Contact Info.&lt;/h3&gt;
              &lt;ul className="contact-info"&gt;
                  &lt;li&gt;
                      &lt;i className="sl-icon-map"&gt;&lt;/i&gt;198 West 21th Street, Suite 721 New York NY 10016&lt;/li&gt;
                  &lt;li&gt;
                      &lt;i className="sl-icon-phone"&gt;&lt;/i&gt;+ 1235 2355 98&lt;/li&gt;
                  &lt;li&gt;
                      &lt;i className="sl-icon-envelope-open"&gt;&lt;/i&gt;
                      &lt;a href="#"&gt;info@yoursite.com&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;i className="sl-icon-globe-alt"&gt;&lt;/i&gt;
                      &lt;a href="#"&gt;www.yoursite.com&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div className="col-md-8 col-md-push-1 col-sm-12 col-sm-push-0 col-xs-12 col-xs-push-0"&gt;
              &lt;div className="row"&gt;
                  &lt;div className="col-md-6"&gt;
                      &lt;div className="form-group"&gt;
                          &lt;input className="form-control" placeholder="Name" type="text" /&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="col-md-6"&gt;
                          &lt;div className="form-group"&gt;
                              &lt;input className="form-control" placeholder="Email" type="text" /&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="col-md-12"&gt;
                              &lt;div className="form-group"&gt;
                                  &lt;textarea
                                      name=""
                                      className="form-control"
                                      id=""
                                      cols="30"
                                      rows="7"
                                      placeholder="Message"&gt;&lt;/textarea&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="col-md-12"&gt;
                              &lt;div className="form-group"&gt;
                                  &lt;input value="Send Message" className="btn btn-primary" type="submit"/&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>header.js</strong></p>
  
  <pre><code>import React from "react";
  import {render} from "react-dom";
  import { Link } from "react-router-dom";
  import { BrowserRouter as Router } from "react-router-dom";
  export const Header = (props) =&gt; {
      return(
          &lt;header id="fh5co-header" role="banner"&gt;
          &lt;div className="container"&gt;
              &lt;div className="header-inner"&gt;
                  &lt;h1&gt;&lt;i className="sl-icon-energy"&gt;&lt;/i&gt;&lt;Link to="/"&gt;Lesser&lt;/Link&gt;&lt;/h1&gt;
                  &lt;nav role="navigation"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;Link className="active"  to="/"&gt;Home&lt;/Link&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;Link  to="/blog"&gt;Blog&lt;/Link&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;Link  to="/portfolio"&gt;Portfolio&lt;/Link&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;Link  to="/services"&gt;Services&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;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      );
  };
  </code></pre>