Verlinkung zu verschiedenen Seiten mit dem react-bootstrap navbar angegebenen Fehler: Uncaught TypeError: router.createHref ist keine Funktion

Question

Ich versuche, zu react-router v4 zu migrieren. Ich habe schließlich das Routing selbst manuell arbeiten (wenn ich die spezifische URL eingeben), aber jetzt habe ich Probleme, die Seiten über meine Navbar zu verknüpfen.

Zuvor würde ich einfach LinkContainer verwenden um die NavItem, aber wenn ich tun, um diese jetzt erhalte ich die Fehlermeldung:

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)

, die ich nichts von gefunden zu haben, wenn es googeln.

Hier ist mein aktueller 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') 
); 

Alle Ideen, wie dieses Problem beheben?

Answer 1

React-Router-Bootstrap noch nicht unterstützt v4.

Versuchen Sie dieses Problem:

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; 

Verbrauch:

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

Oder einige andere hier: https://github.com/react-bootstrap/react-router-bootstrap/issues/186

Answer 2

habe ich diesen exakt die gleichen Fehler, aber nicht mit reagieren-Router-bootsrap . Für mich war das Problem hier, dass ich die Importe nicht geändert hatte, um reaction-router-dom zu sein.

Ich änderte

import { Link } from 'react-router'

zu

import { Link } from 'react-router-dom'