React-router + react-bootstrap

如何合并两者来创建垂直菜单？我有一个基本的路由设置（工作和获取呈现为一个标准的水平菜单）：React-router + react-bootstrap

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

从反应的自举文档，还有这个例子的垂直导航元素：

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>

来源

2016-11-12 Wasteland

使用反应 - 路由器的自举项目：https://github.com/react-bootstrap/react-router-bootstrap

来源

2016-11-13 13:21:23

感谢。为什么我没有想过检查这样的合并是否还没有创建？ – Wasteland

该项目没有太多文档。你知道一个好的bootstrap可折叠的导航栏示例react-router-bootstrap吗？我正在寻找一个结合了这个https：// react-bootstrap的例子。github.io/components.html#navigation with react-router。谢谢！ –

提供的链接上的绝对0文档。这个答案不应该被接受。 – tonkihonks13

我使用的反应，引导太和终极版，你可以采取另一种选择就是做这个程序，我想我不想使用链接因为按钮看起来比这更好。如果您使用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 
    }

如果您需要的组件已卸，你可以做到这一点之前，有火的作用。

来源

2017-06-12 20:04:53 Sebas

我用react-router-bootstrap在我的项目，真正帮助，安装信息：

npm install -S react-router-bootstrap

使用

在<LinkContainer>包装你的阵营引导元素，使其表现得像一个React路由器<Link>

<LinkContainer>接受相同的参数做出反应路由器的<NavLink>

请注意，在默认情况下做出反应路由器将匹配包含指定的扶植路径的任何位置。要使<LinkContainer>完全匹配的位置，请将精确设置为true或使用 <IndexLinkContainer>代替。

，这是使用的例子：使用反应路由器的自举

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

：

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

来源

2017-07-02 06:06:37 Alireza

React-router + react-bootstrap

回答

相关问题