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

advertisements

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{
    render(){
        return (
        <Navbar collapseOnSelect>
            <Navbar.Header>
              <Navbar.Brand>
                <a href="#">My App</a>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
              <Nav>
                <LinkContainer to="/page1"><NavItem>Page1</NavItem></LinkContainer>
                <LinkContainer to="/page2"><NavItem>Page2</NavItem></LinkContainer>
              </Nav>

            </Navbar.Collapse>
          </Navbar>
        );
    }
}

//routing code
ReactDOM.render(
         <Router>

             <div>
            <NavigationBar />
             <Route path="/" component={Home}/>
            <Route path="/page1" component={Page1}/>
            <Route path="/page2" component={Page2}/>
             </div>
    </Router>,
    document.getElementById('root')
);

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 (
    <li>
      <NavLink exact={exact} to={to} activeClassName={activeClassName}>{children}</NavLink>
    </li>
  );
}

MenuLink.propTypes = propTypes;

Usage:

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

Or some other here: https://github.com/react-bootstrap/react-router-bootstrap/issues/186