title: react-router-bootstrap linkcontainer
body: <p>How do I use react-router-bootstrap to link to another react component? Do I need to set up my routes with react-router first? I don't know how to use react-router-bootstrap's LinkContainer to route a NavItem to a separate react component.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
  import request from 'superagent';
  import CardList from './CardList.jsx';
  import AddNewCard from './AddNewCard.jsx';
  import ReactRouterBootstrap, { LinkContainer } from 'react-router-bootstrap';
  
  const propTypes = {
    children: React.PropTypes.element,
  }
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        cards: [],
      }
      this.addNewCardHandler = this.addNewCardHandler.bind(this);
      this.deleteCardHandler = this.deleteCardHandler.bind(this);
      this.saveButtonHandler = this.saveButtonHandler.bind(this);
    }
  
    componentDidMount() {
      this.getAllCards();
    }
  
    getAllCards() {
      const url = '/api/cards';
      request.get(url)
      .end((err,res) =&gt; {
        if (err) {
          console.log(`err: ${err}`);
        }
        this.setState({
          cards: res.body,
        });
      });
    }
    deleteCardHandler(id) {
      console.log(`id: ${id}`);
    }
    addNewCardHandler() {
      request.post(url)
        .send({
          firstname,
          lastname,
          email,
          phonenumber,
          location,
          jobtitle,
          company,
          githubhandle,
          linkedinhandle,
          twitterhandler,
          personalsite,
        })
        .end((err, res) =&gt; {
          console.log(`res: ${res}`);
          console.log(`err: ${err}`);
        })
    }
  
    saveButtonHandler(){
      console.log('saveButtonHandler')
    }
    render() {
      return (
        &lt;div&gt;
          &lt;Navbar inverse collapseOnSelect&gt;
            &lt;Navbar.Header&gt;
              &lt;Navbar.Brand&gt;
                &lt;a href="#"&gt;BIZIT&lt;/a&gt;
              &lt;/Navbar.Brand&gt;
            &lt;/Navbar.Header&gt;
            &lt;Navbar.Collapse&gt;
              &lt;Nav&gt;
                &lt;NavItem eventKey={1} href="#"&gt;Filter&lt;/NavItem&gt;
                &lt;NavItem eventKey={2} href="#"&gt;Search&lt;/NavItem&gt;
              &lt;/Nav&gt;
              &lt;Nav pullRight&gt;
                &lt;NavItem eventKey={1} href="#"&gt;Sign Up&lt;/NavItem&gt;
                &lt;NavItem eventKey={2} href="#"&gt;Login&lt;/NavItem&gt;
              &lt;/Nav&gt;
            &lt;/Navbar.Collapse&gt;
          &lt;/Navbar&gt;
          &lt;CardList
            saveButtonHandler={this.saveButtonHandler}
            cards={this.state.cards}
            /&gt;
          &lt;Navbar inverse collapseOnSelect fixedBottom&gt;
            &lt;Navbar.Collapse&gt;
              &lt;Nav&gt;
                &lt;NavItem eventKey={4} href="#"&gt;Home&lt;/NavItem&gt;
                &lt;NavItem eventKey={5} href="#"&gt;Profile&lt;/NavItem&gt;
                &lt;LinkContainer to="/AddNewCard"&gt;
                  &lt;NavItem eventKey={6}&gt;Add Card&lt;/NavItem&gt;
                &lt;/LinkContainer&gt;
                &lt;NavItem eventKey={7} href="#"&gt;Saved Cards&lt;/NavItem&gt;
              &lt;/Nav&gt;
            &lt;/Navbar.Collapse&gt;
          &lt;/Navbar&gt;
        &lt;/div&gt;
      )
    }
  
  }
  
  App.propTypes = propTypes;
  export default App;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>