Linking to different pages with the error ras-bootstrap navbar data: Uncaught TypeError: router.createHref is not a function


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.

Previously I would simply use LinkContainer around the NavItem, but when I do this now I am getting the error:

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)

which I haven't found anything of when googling it.

Here is my current code:

// the Navbar's code
export default class NavigationBar extends Component{
        return (
        <Navbar collapseOnSelect>
                <a href="#">My App</a>
              <Navbar.Toggle />
                <LinkContainer to="/page1"><NavItem>Page1</NavItem></LinkContainer>
                <LinkContainer to="/page2"><NavItem>Page2</NavItem></LinkContainer>


//routing code

            <NavigationBar />
             <Route path="/" component={Home}/>
            <Route path="/page1" component={Page1}/>
            <Route path="/page2" component={Page2}/>

Any ideas on how to fix this?

react-router-bootstrap not yet support v4.

Try this issue:

import React, { PropTypes } from 'react';
import { NavLink } from 'react-router-dom';

const propTypes = {
  to: PropTypes.string.isRequired,
  activeClassName: PropTypes.string,
  children: PropTypes.node.isRequired,
  exact: PropTypes.bool

function MenuLink({ to, activeClassName = 'active', exact, children }) {
  return (
      <NavLink exact={exact} to={to} activeClassName={activeClassName}>{children}</NavLink>

MenuLink.propTypes = propTypes;


<MenuLink exact to='/'> Home </MenuLink>

Or some other here: