title: Navigation in a single page app with react.js
body: <p>I'm building a single page application with React and Backbone and am trying to figure out best practices for handling navigation between content in the app. My app will have a sidebar with links, for example, to "photos" and "settings". The sidebar is always present, so upon clicking "settings" I want the settings component to be rendered without the entire page reloading. Slack is a great example of what I'm looking for, where clicking a different channel switches the conversation content, but does not reload the entire page. </p>
  
  <p>I had a few ideas on how to implement this, but i'm not sure what's best: </p>
  
  <ol>
  <li>Have a general react component (console.jsx) that accepts a urlparameter as a prop to determine which content (photos or settings) to render.</li>
  </ol>
  
  <p>or 2. have a general react component and define a state variable that represents which content to render. </p>
  
  <p>Any help would be greatly appreciated!</p>