Client Side Routing w/ React Router v.5
Topics:
- React Router
- Using Link and NavLink to navigate to specific routes
- Passing Route Parameters
- Passing props to components rendered by the Router
Instructions
Task 1: Project Set-up
-
Fork this repository, then clone your fork.
-
NOTE You have 2 servers that you will be running here so read these instructions carefully.
-
In the root of this directory: Run
npm install
to download dependencies. -
Run the server using
npm start
ornode server.js
. (Don't worry too much about this process, you'll get used to doing this and it will be explained more in the future). -
In a separate terminal cd into the
client
folder and runnpm install
to download dependencies. -
Still inside the
client
folder runnpm start
to run the client application. -
Once your application is up and running on the client, you should see a browser window that looks like this at
localhost:3000
(although the port number will be different if 3000 is not being used).
Task 2: MVP
Design Files
Once you are done your application will have two routes:
Set up Routes
- Wrap your app with the router.
- Inside your App file add two routes.
- one route for
/
that loads theMovieList
component. This component will need the movies injected into it via props. - one route that will take an
id
parameter after/movies/
(ex:/movies/2
,/movies/3
where the id is dynamic). This route should load theMovie
component.
- one route for
Add Functionality
- When a user clicks on the movie card inside
MovieList
they should be taken to/movies/{id of clicked movie here}
to see the details of the selected movie. - You will need to modify line 7 of
Movie.js
to get the id of the selected movie from the URL. - Add functionality so the
Home
button on theSavedList
component navigates back to home. - You should now be able to navigate back and forth between the list of movies and the detailed view of a single movie.
Task 3: Stretch Goals
If you have completed Parts 1 & 2 feel free to move on to these stretch goals.
Refactor so that our code is DRY
- You may notice that we are using very similar JSX in the
Movie
component and in theMovieDetails
component inMovieList.js
. The main difference is the list of stars, which only exists in the "detailed" view of theMovie
component. - Create a new component in
MovieCard.js
that returns a Movie Card. Then remove the old code fromMovie
andMovieDetails
and instead return the newMovieCard
component. - The Movie Card should be flexible enough to handle displaying a movie with or without the list of stars.
Save Movie
functionality
Add - You will notice there is a 'Saved Movies' component that we are not currently using. In this step you will add the functionality to save a movie. You will need to pass the
addToSavedList
function to theMovie
component. Once you have done that you will need to add a click handler to the save button. You will need to uncomment lines 24-27 inMovie.js
to complete this.
Link
s
Turn your Saved Movie list into - Your list of saved movies should be links to the movie itself. Study and understand what the
saveMovie
function is doing.
Link
s into NavLink
s
Turn your Saved Movie - Navlink
Submission Format
- Submit a Pull-Request to merge
<firstName-lastName>
Branch intomain
(student's Repo). Please don't merge your own pull request