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文档中，有一个垂直导航元素的例子:

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，真的很有帮助，安装do:

npm install -S react-router-bootstrap

使用

把你的React Bootstrap元素包裹在一个<LinkContainer>中行为像一个React路由器<Link>

<LinkContainer>接受与React Router的<NavLink>相同的参数

请注意，在默认情况下，React Router会匹配任何位置包含在prop中指定的路径。使<LinkContainer>匹配准确的位置，设置准确的道具为true或use<IndexLinkContainer>。

，下面是用法的例子:

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

使用react-router-bootstrap:

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

Answer 2

我也在使用react-bootstrap和Redux，你可以采取的另一个选项是通过编程来做这个，我想我不想使用链接，因为一个按钮看起来比那好得多。如果你正在使用react-router，你可以使用上下文来访问你的历史记录。

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

HandleClick函数:

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

如果你需要在组件被挂载之前触发一个动作，你可以在这里执行。