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-router-bootstrap，真的有帮助，安装do：

npm install -S react-router-bootstrap

<强>用法

将您的React Bootstrap元素包装在<LinkContainer>中以进行制作   表现得像React Router <Link>

<LinkContainer>接受与React Router＆＃39; <NavLink>
相同的参数
请注意，默认情况下，React Router会匹配任何位置   包含prop中指定的路径。使<LinkContainer>匹配   准确的位置，将确切的道具设置为真或使用   而是<IndexLinkContainer>。

这是用法的例子：

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

使用react-router-bootstrap：

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

Answer 2

我也在使用react-bootstrap和Redux，你可以采取的另一个选择是以编程方式执行此操作，我想我不想使用Link，因为按钮看起来比这更好。如果您使用的是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
  }

如果你需要在安装组件之前触发一个动作，你可以在那里进行。

React-router + react-bootstrap

2 个答案: