Nested Routes in React Router

Objectives

Describe how React Router allows nesting routes
Explain how to organize routes in a standard React & React Router application

Overview

In the previous lesson, we saw how to have routes dynamically render different components. However, as you may have noticed, each time we rendered one component, our previous component disappeared. In this lesson, we'll see how routes can be used to specify multiple components to render.

Master Detail Without Routes

Have you ever used Apple's Messages app for your Mac? How about Gmail? What about YouTube? All of those apps use some version of a "Master-Detail" interface. This is when there is something pertaining to the entire resource, such as a list of all messages, videos, or emails, and some more detailed display of a specific item or action on another portion of the screen. Clicking on a new item in the list changes which item we have selected.

Nesting

With React-Router, we can make the master-detail pattern by making our components children of each other. Take YouTube for example. Let's pretend that visiting /videos displays a list of videos. Clicking on any video keeps our list of videos on the page, but also displays details on the selected video. This should be updated by the URL - the URL should have changed to /videos/:videoId. The VideoDetail in this case is a 'Nested Component' of '/videos' - it will always have the list rendered before it.

Code Along

Rendering Our List

To begin, let's take a look at our starter code. First we have our App component. App has some dummy movie data provided in state for us (normally, we would likely be fetching this info). It also has Router wrapping everything else. All JSX wrapped within Router can use Routes, including child components. In our case, that is all of our components.

App has two Route elements:

<Route exact path="/" render={() => <div>Home</div>} />
<Route path='/movies' render={routerProps => <MoviesPage {...routerProps} movies={this.state.movies}/>} />

Notice what is happening on the second Route. When rendering a component through a Route, the component receives props from the Route automatically that contain information on the route, including the URL path that triggered the Route to render. This is happening on both of these Routes, but in the first Route, it is auotmatically being passed down. The issue here is that, in addition to Router props, we also want to pass in the data we have in state.

The easiest way to handle this is to use the render. The render attribute of Route takes an anonymous function, and since Route is passing its own props automatically, they are available as the argument for the function, called routerProps here. Since the function is simply returning a component, we can then pass in both routerProps and this.state.movies as props to the MoviesPage component.

Looking at the MoviesPage component, this component is responsible for loading our MovieList component and passing in the movies we received from App.

// ./src/containers/MoviesPage.js
import React from 'react';
import { Route } from 'react-router-dom';
import MoviesList from '../components/MoviesList';
import MovieShow from './MovieShow';

const MoviesPage = ({ movies }) => (
  <div>
    <MoviesList movies={movies} />
  </div>
)

export default MoviesPage

At the moment, our MoviesPage component is purely presentational. It is simply middle component between App and MoviesList, but we will come back to this component in a moment. Right now, if we try to run our React app, we get an error because MovieList is not defined yet!

Let's create our MoviesList component to render React Router Links for each movie.

// ./src/components/MoviesList.js
import React from 'react';
import { Link } from 'react-router-dom';

const MoviesList = ({ movies }) => {
  const renderMovies = Object.keys(movies).map(movieID =>
    <Link key={movieID} to={`/movies/${movieID}`}>{movies[movieID].title}</Link>
  );

  return (
    <div>
      {renderMovies}
    </div>
  );
};

export default MoviesList;

Since the prop movies is an object containing each movie, in order to iterate over it, we'll need to use Object.keys(movies).map(). Since the keys in the object are also the id values for each movie, we can use movieID directly in some of the attributes, but also use it to get information from the movies object, as we see with movies[movieID].title. Now, when our app runs, if a user hits to the /movies route, MoviesList will render a list of clickable router links.

Linking to the Show

Right now, we're using React Router to display the MoviesPage component when the url is /movies. We'll need to add in our first nested route within MoviesPage so that going to '/movies/:movieId' will display details about a given movie using a MovieShow component.

Before that, let's create our MovieShow component. Later on, we will see that this component will need to dynamically figure out which Movie it should render.

// ./src/containers/MovieShow.js
import React from 'react';

const MovieShow = props => {

  return (
    <div>
      <h3>Movies Show Component!</h3>
    </div>
  );
}

export default MovieShow;

Next, we need to add a nested route in our src/containers/MoviesPage.js file to display the MovieShow container if that route matches /movies/:movieId

// .src/containers/MoviesPage.js
import React from 'react';
import { Route } from 'react-router-dom';
import MoviesList from '../components/MoviesList';
import MovieShow from './MovieShow';

const MoviesPage = ({ match, movies }) => (
  <div>
    <MoviesList movies={movies} />
    <Route exact path={match.url} render={() => (
      <h3>Please select a Movie from the list.</h3>
    )}/>
    <Route path={`${match.url}/:movieId`} component={MovieShow}/>
  </div>
)

export default MoviesPage

With the MoviesPage container we are now adding two Route components. You will notice that we are inheriting match from this.props this is a POJO (plain old Javascript object) that contains the current url. It is being passed in as part of the Router props from App. Using match, we are able to show stuff depending on what the match.url returns (in this example, it returns movies/). In the 2nd Route component we are defining a path of ${match.url}/:movieId. This will load the MovieShow component when the url looks something like movies/1.

Going briefly back to our MoviesList component, when movies is mapped, our has Links are each getting a unique path in the to={...} attribute, since each movieID is different.

// ./src/components/MoviesList.js
import React from 'react';
import { Link } from 'react-router-dom';

const MoviesList = ({ movies }) => {
  const renderMovies = Object.keys(movies).map(movieID =>
    <Link key={movieID} to={`/movies/${movieID}`}>{movies[movieID].title}</Link>
  );

  return (
    <div>
      {renderMovies}
    </div>
  );
};

export default MoviesList;

Refresh the page at /movies. Now, clicking a link changes the route, but we're not actually seeing any content about that movie that would be in our MovieShow page. You should only see the text Movies Show Component!.

Just as we saw with App the data we want to display on a particular MovieShow page is available in its parent, MoviesPage, as props. In order to to MovieShow to display this content, we will need make our movies collection available within MovieShow:

// .src/containers/MoviesPage.js
import React from 'react';
import { Route } from 'react-router-dom';
import MoviesList from '../components/MoviesList';
import MovieShow from './MovieShow';

const MoviesPage = ({ match, movies }) => (
  <div>
    <MoviesList movies={movies} />
    <Route exact path={match.url} render={() => (
      <h3>Please select a Movie from the list.</h3>
    )}/>
    <Route path={`${match.url}/:movieId`} render={routerProps => <MovieShow movies={movies} {...routerProps} /> }/>
  </div>
)

export default MoviesPage

At this level, we don't know what :movieId is yet. We only know this info once the Route has been triggered and the component, MovieShow is rendered. This means we'll need to modify our MovieShow page:

import React from 'react';

const MovieShow = ({match, movies}) => {
  return (
    <div>
      <h3>{ movies[match.params.movieId].title }</h3>
    </div>
  );
}

export default MovieShow;

Here, we've got our movies as an object in props. We've also got our Router props, from which we've extracted match. Within the match object is params, which contains any parameters from the URL path. In this case, we only have one, movieId, which we defined in MoviesPage. Combining info from these two props lets us access the specific movie that's ID matches the movieId from the path, resulting in the correct movie title being displayed!

Summary

So far we saw how to set up our nested routes. We did so by making two Route components within MoviesPage. One Route component that renders a component if it is a perfect match with the url or the nested Route if it includes the match.url and the nested key (in this case :movieId).

If you're thinking to yourself that props seem to be getting a little out of hand... well, you're right! Props can be unruly in complex apps, with multiple layers of components. Adding in React Router can further complicate things. Having to pass down all of the movies to MovieShow just to display one movie should feel weird. As we will soon learn, this issue can be solved using Redux.

View React Router Nested Routes on Learn.co and start learning to code for free.

kachel/react-router-nested-routes-code-along-v-000