Step 4 – Starting Point

If you followed the previous steps of the tutorial, you should be able to continue here, but if you’re just jumping in or got lost in the last steps or just want to skip ahead, you can either check-out this branch of the Github repo or change directories to the “3” theme (wp-content/themes/3)

Imports for routing

To implement routing, (we’re using React Router v2.8.1) we need to import some components and functions from react-router and react-router-scroll.

At the top of the “index.js” file, with the other imports, add:

import { Router, Route, browserHistory, applyRouterMiddleware, Link } from 'react-router';
import { useScroll } from 'react-router-scroll';

Create new components

Now, let’s create a few new components that will act as our pages for the routes we’re about to implement.

Still inside the “index.js” file, create the following 2 components:

class MoviesPage extends Component {
  render() {
    return(
      

        
This is the movies list page
        Home
        

        Movie Details Page
      
    );
  }
}

class MoviePage extends Component {
  render() {
    return(
      

        
This is the movie detail page
        Home
        

        Movies List Page
      
    );
  }
}

Add the Router to the app

Now that we have a few components to act as our pages, we can setup the Router to route to these components.

Update the App component like so:

class App extends Component {
  render() {
    return(
      
        
        
        
      
    )
  }
}

Now, our App component isn’t just returning the <HomePage> component, but instead is returning a <Router> component, and we’ve hooked up the Router to be aware of our browserHistory (so we can use the back button) and to pay attention to our scroll position (so if we do click the back button we land at the same spot in the page we were previously at).

Basic routes

Then, we nest a few <Route> components inside the <Router> component.

We add a “/movies” Route that will render the <MoviesPage> component if the URL of our app is “graphql-workshop.dev/movies”

Dynamic Routes

Next, we add a “dynamic route” for our MoviePage.

The “/movies/:movieId” Route will render the <MoviePage> component if the URL is “graphql-workshop.dev/movies/some-value-here”

React Router makes the “:movieId” part of the route available to be used to create the content for the Route, and we’ll look at that a little later when we connect our app with some real data.

WildCard Routes

The last Route we add is a “wildcard” route, which acts as a catch all. Any url not matching “/movies” or “/movies/:movieId” will fall-back to this route.

In our case, we’ve defined this route to use our HomePage component. In most cases, you would probably implement something like a “NotFound” component to act as a 404 page, and assign a specific route for the homepage.

Visit the Routes

At this point, you should be click the “Explore Films” link on the HomePage, and it should take you to the “/movies” Route which should provide a link to the Movie Details Page and a link back to Home.

So we now have a multi-page Single Page App. Awesome!

The app should look like this now: