react 路由器 + react 引导

Question

如何合并两者以创建垂直菜单？我有一个基本的路由设置(它可以工作并呈现为标准的水平菜单):

<div>
      <Link className="p5" to='/'>Home</Link>
      <Link className="p5" to='/Gallery'>Gallery</Link>
      <Link className="p5" to='/Contact'>Contact</Link>
</div>

从 react-bootstrap 文档中，有一个垂直导航元素的例子:

function handleSelect(selectedKey) {
  alert('selected ' + selectedKey);
}

const navInstance = (
  <Nav bsStyle="pills" stacked activeKey={1} onSelect={handleSelect}>
    <NavItem eventKey={1} href="/home">NavItem 1 content</NavItem>
    <NavItem eventKey={2} title="Item">NavItem 2 content</NavItem>
    <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
  </Nav>
);

我很困惑如何将它们放在一起？我设法在不使用 react-bootstrap 的情况下将它们组合在一起，只是像下面这样的普通 bootstrap ，但这违背了使用 react-bootstrap 的目的。

<ul className="nav nav-pills nav-stacked">
      <li className="active"><Link className="p5" to='/'>Home</Link></li>
      <li><Link className="p5" to='/Gallery'>Gallery</Link></li>
      <li><Link className="p5" to='/Contact'>Contact</Link></li>
</ul>

Answer 1

我用 react-router-bootstrap在我的项目中，真的很有帮助，安装:
npm install -S react-router-bootstrap

Usage

Wrap your React Bootstrap element in a <LinkContainer> to make it behave like a React Router <Link>

<LinkContainer> accepts same parameters as React Router's <NavLink>

Please note that by default React Router will match any location that contains path specified in to prop. To make <LinkContainer> to match the location exactly, set exact prop to true or use <IndexLinkContainer> instead.

这是用法的示例:

<Button href="/example">Foo</Button>

使用 react-router-bootstrap:

<LinkContainer to="/example">
  <Button>Foo</Button>
</LinkContainer>