Skip to content

Iteration 4 - Refactoring with Router

Closed Dec 15, 2020 60% complete

In the fourth iteration, we will be refactoring our application to use Router instead of conditional rendering to change the view!

So far the application has worked like a single page applicaiton. We have different views that are conditionally rendered, but we have to control the logic for when to render certain things. Furthermore, the URL never changes.

T…

In the fourth iteration, we will be refactoring our application to use Router instead of conditional rendering to change the view!

So far the application has worked like a single page applicaiton. We have different views that are conditionally rendered, but we have to control the logic for when to render certain things. Furthermore, the URL never changes.

To crete a better UX, we’re going to be using React Router to conditionally render our views based on the URL.

This iteration is all about refactoring. Use the table below to add in appropriate routes.

View URL Path
Homepage, logged in or not (from iteration 1) /
Movie show page (from iteration 3) /:movieId, where movieId is the id of the movie being displayed
As you refactor, continue to rely on your test suite to ensure that no functionality is being lost/destroyed as you add in Router!

Adding in Router is likely to break your tests at first. Make sure to update those to keep everything passing.

Check out this article to learn more about URL anatomy.

User Story

When a user clicks on a movie and the details page is rendered, the URL updates to reflect that movie’s unique ID as well
The user can click the browser forward & back arrows to navigate
Suggested completion date

End of Thursday in Week 2
Suggested testing progress by end of iteration

Unit & integration tests are written & passing
Tests have been updated to accommodate Router
Asynchronous testing is completed
Router testing is completed

Loading