React-router + react-bootstrap

Question

How do I merge the two to create a vertical menu? I've got a basic routing setup (which works and gets rendered as a 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 react-bootstrap docs, there's this example 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'm confused how to get both of them together? I managed to put them together without using react-bootstrap, just normal bootstrap like below, but that defeats the purpose of using 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

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

npm install -S react-router-bootstrap

Usage

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

<LinkContainer> accepts same parameters as React Router's <NavLink>

Please note that by default React Router will match any location that contains path specified in to prop. To make <LinkContainer> to match the location exactly, set exact prop to true or use <IndexLinkContainer> instead.

and this is the example of the usage:

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

Using react-router-bootstrap:

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

Answer 2

I am using react-bootstrap too and Redux, another option you can take is doing this programmatically, I think I did not want to use Link because a button looked quite better than that. If you are using react-router, you can use the context to access your history.

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