React Components as Routes Lab

Overview

In this lab, you will create a simple Client-Side routing application with React Router.

Objectives

• Practice building an application with React Router
• Access routes using a Navbar with matched routes
• Visit different "views" in the application by accessing different routes

React Router App

In this lab we are going to build out an application that has routes for a Home Page, Actors Page, Movies Page and Directors Page. Our goal is to provide routes and links for these 4 pages.

This is what our app should look like when we are done with this lab:

• Home Page
• Movies Page
• Directors Page
• Actors Page

Let's work through this one component at a time

Components

Our src folder contains the following:

src/
├── data.js
├── index.js
|-- containers/
|   |-- App.js
└── components/
    ├── Actors.js
    ├── Directors.js
    ├── Home.js
    ├── Movies.js
    └── NavBar.js

All of the file and module imports are done for you, so you just need to focus on the JSX for these components.

Index.js

Our index.js file is completed for us. It loads App as the top level component.

data.js

This file contains seed data for Actors, Movies & Directors

Component Info

App

This component already contains a Router wrapper where we'll include our particular routes. Inside this element, we'll need to render our Navbar and 4 React Router Route components with paths to /, /movies, /directors & /actors and rendering the respective components. When a user visits the root URL, they should see the Home component.

Note: Since a Router wrapper can only wrap one child element, use a div to wrap the Navbar and Routes. This allows us to apply a CSS class at the App component level.

Navbar

This component needs to render 4 <NavLink> components. They will be for /, /movies, /directors, /actors <-- in this order(test checks for this).

Home

This component should render the text Home Page in an <h1>.

Movies

This component should render the text Movies Page in an <h1>, and make a new <div> for each movie. The <div> should contain the movie's title, time and a <ul> with a list of its genres.

Directors

This component should render the text Directors Page in an <h1>, and make a new <div> for each director. The <div> should contain the director's name and a <ul> with a list of their movies.

Actors

This component should render the text Actors Page in an <h1>, and make a new <div> for each actor. The <div> should contain the actor's name and a <ul> with a list of their movies.

Note: The tests will count how many <div>s are nested inside your Movies, Directors, and Actors components. So to get tests to pass, you must create exactly one <div> for each movie, director, or actor, and no additional nested <div>s in those components.

Resources

• React Router
• React Router Tutorial