In this lab, you will create a simple client-side routing application with React Router.
- 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
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:
Let's work through this one component at a time
Our src
folder contains the following:
src/
├── data.js
├── index.js
└── components/
├── App.js
├── 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.
Our index.js
file is completed for us. It loads the BrowserRouter
component
from React Router, as well as App
as the top level component.
This file contains seed data for Actors, Movies, and Directors.
Inside this element, we'll need to render our Navbar
and four React Router
Route
components with following paths:
/movies
: should render theMovies
component/directors
: should render theDirectors
component/actors
: should render theActors
component/
: should render theHome
component
This component needs to render 4 NavLink
components. They will be for /
,
/movies
, /directors
, /actors
, in this order (test checks for this).
This component should render the text Home Page
in an <h1>
.
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, each within their own <li>
.
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.
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 yourMovies
,Directors
, andActors
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.