React bootstrap 导航栏不适合链接到其他页面

Question

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

Cannot GET /page1

而且我还注意到浏览器顶部的 link 转到：http://localhost:3000/page1 as opposed to http://localhost:3000/#/cities（就像我使用 Link 一样）。

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

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 将文本包裹起来，当我们点击文本时它就会起作用，这不是我想要的。我该怎么做才能使 NavItem 表现得像 Link 但看起来仍然不错？

谢谢

Answer 1

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

一切都搞定了。

React bootstrap 导航栏不适合链接到其他页面

React bootstrap navbar not appropriate linking to other pages

javascript

navbar

reactjs

react-bootstrap