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

回答

相關問題