Question

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

无法GET / page1

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

我当前的导航条代码为：

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的行为类似于链接，但看起来还不错？

由于

Answer 1

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

照顾好一切。

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

1 个答案: