title: Dynamically Generate Nav Bar in Reactjs?
body: <p>I am wondering what the best way would be to change my nav bar based on where a user is on the site.</p>
  
  <p>I am thinking there will be 3 different states of my nav bar.</p>
  
  <ol>
  <li>Non Logged in users</li>
  <li>Logged in users</li>
  <li>Admin Area</li>
  </ol>
  
  <p>I am using Mobx, Reactjs and ReactRouter</p>
  
  <p>I will have components like this</p>
  
  <pre><code>@inject("routingStore")
  @observer
  export default class TestComponent extends Component {
    render() {
      return (
         &lt;div&gt;test routing&lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I was thinking of making my Nav into a component then check the url if it would be something like</p>
  
  <p><code>localhost:8080/test-area</code> (could mean they are not logged in or logged in, would do further checking to see if say session storage with the auth token was set or not)</p>
  
  <p>or</p>
  
  <pre><code>locahost:8080/admin/test
  </code></pre>
  
  <p>I would somehow check for "/admin" and load up the correct nav.</p>
  
  <p>I however not sure how to get the stuff to re-render as I am not sure if switching between "links" will cause anything that is checking the "react-router" stuff to re-render.</p>