使用react-bootstrap導航欄連接到不同頁面給出的錯誤：Uncaught TypeError：router.createHref不是函數

我正在嘗試遷移到react-router v4。我終於得到了路由本身手動工作（當我輸入特定的url），但現在我有通過我的導航欄鏈接頁面的麻煩。使用react-bootstrap導航欄連接到不同頁面給出的錯誤：Uncaught TypeError：router.createHref不是函數

以前我會簡單地使用LinkContainer圍繞NavItem，但是當我做這個，現在我得到的錯誤：

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

關於如何解決此問題的任何想法？

來源

2017-03-28 theJuls

react-router-bootstrap not yet support 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

來源

2017-03-28 17:56:26 AndyK

我看到這個確切的同樣的錯誤，但不與反應，路由器bootsrap 。對我來說，這裏的問題是，我沒有改變進口的反應路由器。

我改變

import { Link } from 'react-router'

到

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

來源

2017-07-18 02:01:31

使用react-bootstrap導航欄連接到不同頁面給出的錯誤：Uncaught TypeError：router.createHref不是函數

回答

相關問題