反应引导导航栏不适合链接到其他页面

Question

我目前有一个包含几个不同页面的应用程序，如果我在初始页面中使用“链接到”组件，路由工作正常，但是从导航栏我收到消息：

无法获取 /page1

我还注意到浏览器顶部的链接指向：http://localhost:3000/page1，而不是 http://localhost:3000/#/cities（就像我使用 Link to 时一样）。

我当前的导航栏代码是这样的：

export class NavigationBar extends Component {

    render(){
        return(    
            <Navbar>
             <Navbar.Header>
               <Navbar.Brand>
                 <a href="#">Navbar</a>
               </Navbar.Brand>
             </Navbar.Header>
             <Nav>
               <NavItem eventKey={1} href="/page1">Page1</NavItem>
               <NavItem eventKey={2} href="/page2">Page2</NavItem>
             </Nav>
        </Navbar>);
    }

}

如果我只是用 Link to 将文本包裹起来，它只会在我们单击文本时起作用，这不是我想要的。我该怎么做才能使 NavItem 的行为类似于 Link to 但仍然看起来不错？

谢谢

Answer 1

我完全忘记了我需要用 react-router-bootstrap 中的 LinkContainer 包装我的每个 NavItem 组件。

一切都解决了。