react-bootstrap navbarを指定して別のページにリンクするとエラーが発生しました：Uncaught TypeError：router.createHrefが関数ではありません

Question

私はreact-router v4に移行しようとしています。私は最終的に（私は特定のURLを入力すると）手動で作業するためにルーティング自体を持っているが、今は私のナビゲーションバーを介してページをリンクするのに苦労している。

以前私は単にNavItem周りLinkContainerを使用しますが、私はこれを行う際に、今、私はエラーを取得しています：

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)

私はそれをグーグルときのものを発見していないいます。

// 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') 
); 

この問題を解決する方法上の任意のアイデア：ここ

は私の現在のコードですか？

Answer 1

react-router-bootstrapまだv4をサポートしていません。

この問題を試してみてください：

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; 

使用法：

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

それともここにいくつかの他：https://github.com/react-bootstrap/react-router-bootstrap/issues/186

Answer 2

が、私はこれと同じエラーを見て、ではなく反応し、ルータbootsrapと。私にとっては、ここでの問題は、輸入を反応ルータドームに変更していないということでした。

私は

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

へ

import { Link } from 'react-router'

を変更