React-router react-bootstrap

发布时间：2020-12-15 05:07:33 所属栏目：百科来源：网络整理

导读：如何将两者合并以创建垂直菜单？我有一个基本的路由设置(可以工作并作为标准水平菜单呈现)： div Link className="p5" to='/'Home/Link Link className="p5" to='/Gallery'Gallery/Link Link className="p5" to='/Contact'Contact/Link/div 从react-bootstra

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

<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>

我也在使用react-bootstrap和Redux,你可以采取的另一个选择是以编程方式执行此操作,我想我不想使用Link,因为按钮看起来比这更好.如果您使用的是react-router,则可以使用上下文来访问历史记录.

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

HandleClick Function:

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

If you need to fire an action before the component is umounted you can do it there.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!