Just the basics of using React Router (version 2.8.1 — v4 just came out and I’ll monkey with that soon).
So you can use React Router to handle all of your navigation, and once getting used to it, it can be pretty simple (or very complex depending on your needs). So here’s the bare bones basics.
First things first, you need to have somewhere for your React app components to actually appear. We can use a simple div with an id that our React code will append to:
Now that we have that taken care of, it’s time to create our component structure. One of the things I love about React is how easy it is to make components and bring them all together.
We’ll need to import a few things from React & React Router Router to be able to make it all work. So we can:
I’m going to create a main component that will be the component that “houses” the rest of our app.
Let’s leave it empty for now. We’ll finish it later.
So let’s say we want to just make a home page and 2 other pages we want to link to.
So pretty basic components. Home has links to both of our other pages, and the Link pages have a Back Home link. Note that we’re using React Router’s Link and not an <a> tag to do this. And in our Link tags, we’ve included a to= and a path name that will be used in our Router code.
So now for the Router:
We use ReactDOM.render to tell our app how the navigation all fits together. It takes 2 arguments: the router code itself, and where to append it to — in this case, our HTML div that we gave the id ‘root-entry.’
Now we have to fill the Router. First, we want to use browserHistory in the main Router tag, and give our Router a starting point:
So our App component, which will house our other components, is set up as the parent route that will use the path of just “/”.
Now we can add our Home component using IndexRoute to tell our Router that Home should load first upon getting to the site.
The Home component/route is set up inside the App route because we want to set it as a child of App. And now we can add our 2 link pages to the router:
They are also added as children of the App component. So if you remember from earlier, we left our App component empty. We simply need to use “this.props.children” to tell it to use our child components we set up in the Router:
And that’s it! You can get a lot more complex, such as adding nested routes, but this should be enough to get some simple React-style navigation up and running.
For a few working CodePen examples, click here for one using this.props.children and here for one that doesn’t.
