Nested Routes Lab

Objectives

  1. Build out a nested resource.
  2. Implement a redirect using React Router.

Instructions

Congratulations, you're working at Petfinder! Before we get to browse all of the cute puppies and kittens, let's build them using a React app with a couple of routes.

Your coworkers have already built out a PetsPage component to render out a list of all the Pets. Your assignment is as follows.

  1. Create a Route so that visiting /pets displays the PetsPage component and renders the list of pets.
  2. Visiting '/pets/:petId' should display some detailed information about a particular pet.
  3. Visiting '/pets/new' should display a form to create a new Pet. After create, the user should be redirected back to '/pets'.

Note: the tests do no check for the routes. They only test the individual components. You will need to manually check that the routes are working in the browser by running npm install && npm start and going to localhost:3000

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