React-router + react-bootstrap

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文档中,有一个垂直Nav元素的示例:

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,就像下面的普通引导程序一样,但这违背了使用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-bootstrap和Redux，你可以采取的另一个选择是以编程方式执行此操作，我想我不想使用Link，因为按钮看起来比那更好。如果您使用react-router，您可以使用上下文来访问您的历史记录。

<Button className="p5" onClick={this.handleClick}>Gallery</Button>

处理点击函数：

handleClick(e) {
    //this.props.history.push('/Gallery');
    this.context.router.push('/Gallery');
    //this.props...();  // You can fire your action here
  }

如果您需要在卸载组件之前触发一个操作，您可以在那里执行。