Question

我正在尝试迁移到react-router v4。我终于让路由本身手动工作（当我输入特定网址时），但现在我遇到了通过我的导航栏连接页面的麻烦。

以前我只是在NavItem周围使用LinkContainer，但是当我这样做时，我收到错误：

未捕获的TypeError：router.createHref不是函数在LinkContainer.render（LinkContainer.js：112）在ReactCompositeComponent.js：796 at measureLifeCyclePerf（ReactCompositeComponent.js：75） at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext（ReactCompositeComponent.js：795）在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）

我在google搜索时没有找到任何内容。

这是我目前的代码：

// 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-bootsrap。对我来说，这里的问题是我没有将导入更改为react-router-dom。

我改变了

import { Link } from 'react-router'

到

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

Answer 2

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

使用react-bootstrap导航栏链接到不同页面时出现错误：未捕获TypeError：router.createHref不是函数

2 个答案: