3

我正在尝试迁移到 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) 在 ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362) 在 ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 在 Object.mountComponent (ReactReconciler.js:46) 在 ReactDOMComponent.mountChildren (ReactMultiChild.js: 238) 在 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')
);

有想法该怎么解决这个吗？

4

2 回答 2

3

我看到了这个完全相同的错误，但没有使用 react-router-bootsrap。对我来说，这里的问题是我没有将导入更改为 react-router-dom。

我变了

import { Link } from 'react-router'

至

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

于 2017-07-18T02:01:31.443 回答
0

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

于 2017-03-28T17:56:26.620 回答