title: React - Child routes not loading
body: <p>So i'm trying to load some child routes using the new react-router. However, when i navigate to the address it shows just a blank screen. So far i only have two links, / and /about. What i want is a main page, that then loads components into that page. For example there is App.js. That is my main page with a dashboard that will link you to the other pages. Then there is two more pages home and about. I want home to load by default , and then when i click on the link i want the about page to be loaded into app instead of home. If i comment out the Link in Dashboard, the page loads, but if i leave Link in Dashboard, ill get errors. Can anyone see what is wrong or know how to achieve what i want?</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import './index.css';
  ReactDOM.render(    
    &lt;App/&gt;
  , document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  import {
    BrowserRouter as Router,
    Route,
    Link, 
    Switch
  } from 'react-router-dom';
  
  import Home from './Home';
  import About from './About';
  import Dashboard from './Dashboard';
  import NotFound from './NotFound';
  
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h2&gt;Welcome to React&lt;/h2&gt;
          &lt;/div&gt;
          &lt;Dashboard/&gt;
          &lt;Router&gt;
            &lt;div&gt;
                &lt;Route exact path="/" component={Home}/&gt;
                &lt;Route exact path="/about" component={About}/&gt;
            &lt;/div&gt;
          &lt;/Router&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>dashboard.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  class Dashboard extends Component {
    render() {
      return (
        &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;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Dashboard;
  </code></pre>
  
  <p>home.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Home extends Component {
    render() {
      return (
        &lt;div &gt;
          &lt;h2&gt;
              Home
          &lt;/h2&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Home;
  </code></pre>
  
  <p>about.js </p>
  
  <pre><code>import React, { Component } from 'react';
  
  class About extends Component {
    render() {
      return (
        &lt;div &gt;
          &lt;h2&gt;
              About
          &lt;/h2&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default About;
  </code></pre>
  
  <p>Errors</p>
  
  <pre><code>Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.
      in Link (at Dashboard.js:8)
      in li (at Dashboard.js:8)
      in ul (at Dashboard.js:7)
      in div (at Dashboard.js:6)
      in Dashboard (at App.js:25)
      in div (at App.js:20)
      in App (at index.js:7)
  
  Uncaught TypeError: Cannot read property 'history' of undefined
  C:\Users\owner\MyWorkspace\Node\React-4\demo\node_modules\react-router-dom\es\Link.js:65 Uncaught TypeError: Cannot read property 'history' of undefined
  
  
  Uncaught TypeError: Cannot read property '__reactInternalInstance$6sfrm3vc59' of null
      at Object.getClosestInstanceFromNode (C:\Users\owner\MyWorkspace\Node\React-4\demo\node_modules\react-dom\lib\ReactDOMComponentTree.js:113)
  </code></pre>