title: Linking to different pages with the react-bootstrap navbar given error: Uncaught TypeError: router.createHref is not a function
body: <p>I am trying to migrate to react-router v4. I finally got the routing itself to work manually (when I type in the specific url), but now I am having troubles linking the pages through my navbar.</p>
  
  <p>Previously I would simply use LinkContainer around the NavItem, but when I do this now I am getting the error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: router.createHref is not a function
       at LinkContainer.render (LinkContainer.js:112)
       at ReactCompositeComponent.js:796
       at measureLifeCyclePerf (ReactCompositeComponent.js:75)
       at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
       at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
       at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
       at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
       at Object.mountComponent (ReactReconciler.js:46)
       at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
       at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)</p>
  </blockquote>
  
  <p>which I haven't found anything of when googling it.</p>
  
  <p>Here is my current code:</p>
  
  <pre><code>// the Navbar's code
  export default class NavigationBar extends Component{
      render(){
          return (
          &lt;Navbar collapseOnSelect&gt;
              &lt;Navbar.Header&gt;
                &lt;Navbar.Brand&gt;
                  &lt;a href="#"&gt;My App&lt;/a&gt;
                &lt;/Navbar.Brand&gt;
                &lt;Navbar.Toggle /&gt;
              &lt;/Navbar.Header&gt;
              &lt;Navbar.Collapse&gt;
                &lt;Nav&gt;
                  &lt;LinkContainer to="/page1"&gt;&lt;NavItem&gt;Page1&lt;/NavItem&gt;&lt;/LinkContainer&gt;
                  &lt;LinkContainer to="/page2"&gt;&lt;NavItem&gt;Page2&lt;/NavItem&gt;&lt;/LinkContainer&gt;
                &lt;/Nav&gt;
  
              &lt;/Navbar.Collapse&gt;
            &lt;/Navbar&gt;
          );
      }
  }
  
  //routing code
  ReactDOM.render(
           &lt;Router&gt;
  
               &lt;div&gt;
              &lt;NavigationBar /&gt;
               &lt;Route path="/" component={Home}/&gt;
              &lt;Route path="/page1" component={Page1}/&gt;
              &lt;Route path="/page2" component={Page2}/&gt;
               &lt;/div&gt;
      &lt;/Router&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p>Any ideas on how to fix this?</p>