使用REACT.js的SPA的导航栏

Question

我是新来的反应者，我想创建一个SPA。  现在，我有几个组件：主页，关于，团队，联系人和导航栏。 就像我说的，我希望它成为SPA，目前，这些部分位于不同的页面中，如何将它们分成一页？  我已将Navbar，Navbar.Header，Nav，Navbar.Collapse，NavItem与“ ComponentClass”“ href”一起使用，并为“ navigationbar”组件“归因”了， 以及应用程序组件的路由器和路由。 有人知道我应该怎么做吗？

导航条形码：

            <Navbar default collapseOnSelect>
            <Navbar.Header>
                <Navbar.Brand>
                    <Link to="/">Scoot Smart Lock</Link>
                </Navbar.Brand>   
                <Navbar.Toggle/>
            </Navbar.Header> 
            <Navbar.Collapse>
                <Nav pullRight>
                    <NavItem eventKey={1} ComponentClass={Link} href="/" to="/">
                        <span className="navItem">Home</span>
                    </NavItem> 
                    <NavItem eventKey={2} ComponentClass={Link} href="/about" to="/about">
                        <span className="navItem">About</span>
                    </NavItem>
                    <NavItem eventKey={3} ComponentClass={Link} href="/team" to="/team">
                        <span className="navItem">Team</span>
                    </NavItem>
                    <NavItem eventKey={4} ComponentClass={Link} href="/contact" to="/contact">
                        <span className="navItem">Contact</span>
                    </NavItem>
                </Nav>
            </Navbar.Collapse>
        </Navbar>