Navigation in a single page app with react.js

Question

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.

I had a few ideas on how to implement this, but i'm not sure what's best:

1. Have a general react component (console.jsx) that accepts a urlparameter as a prop to determine which content (photos or settings) to render.

or 2. have a general react component and define a state variable that represents which content to render.

Any help would be greatly appreciated!

Solution

Have you heard about react router? Seems to be what you want. react router

Comments

[Christian Benke]

Overview guide for newer releases has moved to github.com/reactjs/react-router/blob/master/docs/…