React-router + reaction bootstrap

Question

How to combine these two to create a vertical menu? I have a basic routing setup (which works and appears in the standard horizontal menu):

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

From the action-bootstrap docs, this example is for a vertical Nav element:

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

I am confused how to bring them both together? I managed to assemble them without using a reaction bootstrap, just a normal bootstrap, as shown below, but that defeats the purpose of using a bootstrap reaction.

 <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

Use the reaction-router-boostrap project: https://github.com/react-bootstrap/react-router-bootstrap

Answer 2

I also use reaction bootstrap and Redux, another option you can do is do it programmatically, I think I didn’t want to use Link, because the button looked much better. If you use an interactive router, you can use the context to access your story.

 <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 run an action before the component is removed, you can do it there.

Answer 3

I am using react-router-bootstrap in my project, really helping to install do:

npm install -S react-router-bootstrap

Using

Wrap the React Bootstrap element in a <LinkContainer> to make it behave like a React Router <Link>

<LinkContainer> accepts the same parameters as the React Router <NavLink>

Note that by default, the React Router will match any location that contains the path specified by prop. To make the <LinkContainer> to match the location exactly, set the exact footing for the truth or use the <IndexLinkContainer> .

and this is a usage example:

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

Using reaction-router-bootstrap:

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