title: React App - The context `router` is marked as required in `LinkContainer`, but its value is `undefined`
body: <p>When trying to run my React app I keep getting this error in the browser:</p>
  
  <pre><code>TypeError: Cannot read property 'history' of undefined
  
  LinkContainer.js
  var href = this.context.router.history.createHref(typeof to === 'string' ? {
  </code></pre>
  
  <p>The console shows this error:</p>
  
  <pre><code>The context `router` is marked as required in `LinkContainer`, but its value is `undefined`.
  </code></pre>
  
  <p>I have the <code>&lt;Router&gt;</code> defined around everything in the Index.js and have the LinkContainers setup correctly, or so I think. Then I just have one simple route at the moment. I read a lot where its React-Router v4 that causes issues when working with LinkContainer in React-Router-Bootstrap, but is there no solve for this in v4 and I should downgrade to v3 or am I totally just missing something here to allow this to work?</p>
  
  <p>I am using these package versions:</p>
  
  <pre><code>"react": "^16.8.3",
  "react-bootstrap": "^1.0.0-beta.5",
  "react-dom": "^16.8.3",
  "react-router": "^4.3.1",
  "react-router-bootstrap": "^0.24.4",
  "react-router-dom": "^4.4.0-beta.6",
  </code></pre>
  
  <p>I have the following code:</p>
  
  <p>Index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  import { BrowserRouter as Router } from "react-router-dom";
  
  ReactDOM.render(&lt;Router&gt;&lt;App /&gt;&lt;/Router&gt;, document.getElementById("root"));
  
  serviceWorker.unregister();
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from "react";
  import { Navbar, Nav, NavItem } from "react-bootstrap";
  import { LinkContainer } from "react-router-bootstrap";
  import "./App.css";
  import Routes from "./Routes";
  
  class App extends Component {
      render() {
        return (
          &lt;div className="App container"&gt;
            &lt;Navbar fluid collapseOnSelect&gt;
                &lt;Navbar.Brand&gt;
                  &lt;LinkContainer to="/home"&gt;
                      &lt;NavItem&gt;Ness&lt;/NavItem&gt;
                  &lt;/LinkContainer&gt;
                &lt;/Navbar.Brand&gt;
                &lt;Navbar.Toggle /&gt;
              &lt;Navbar.Collapse&gt;
                &lt;Nav pullRight&gt;
                  &lt;LinkContainer to="/signup"&gt;
                    &lt;NavItem&gt;Signup&lt;/NavItem&gt;
                  &lt;/LinkContainer&gt;
                  &lt;LinkContainer to="/login"&gt;
                    &lt;NavItem&gt;Login&lt;/NavItem&gt;
                  &lt;/LinkContainer&gt;
                &lt;/Nav&gt;
              &lt;/Navbar.Collapse&gt;
            &lt;/Navbar&gt;
            &lt;Routes /&gt;
          &lt;/div&gt;
        );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>Routes.js</p>
  
  <pre><code>import React from "react";
  import { Route, Switch } from "react-router-dom";
  import Home from "./containers/Home";
  
  export default () =&gt; 
      &lt;Switch&gt;
          &lt;Route path="/home" component={Home} /&gt;
      &lt;/Switch&gt;;
  </code></pre>