https://github.com/hollyabrams/react-router-patterns

React Router Exercises
https://github.com/hollyabrams/react-router-patterns

react react-router react-router-dom

Last synced: about 2 months ago
JSON representation

React Router Exercises

• Host: GitHub
• URL: https://github.com/hollyabrams/react-router-patterns
• Owner: hollyabrams
• Created: 2023-04-12T20:14:01.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-04-12T20:14:51.000Z (about 3 years ago)
• Last Synced: 2025-03-04T08:31:54.475Z (over 1 year ago)
• Topics: react, react-router, react-router-dom
• Language: JavaScript
• Homepage:
• Size: 533 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React Router Patterns

## Part 1 - React Router Dog Finder

An app that routes to different dogs and displays information on that dog when you’re at that route.

The routes should look like this:

* /dogs is the homepage and shows all three dogs

* Clicking on a dog from the homepage takes you to that dog’s route. For example, clicking on Whiskey will take you to /dogs/whiskey.

* every other endpoint not listed should redirect you to /dogs.

## Part 2 - React Router Color Factory

Use React Router to build an app that lets you view colors and add new colors.

User Stories

* As a user, I can go to /colors to see a list of all available colors.

* As a user, I can click on one of the colors in my colors list and get taken to a page where I can see that color in all its glory.

  * (The route here should be /colors/:color )

* As a user, I can click on a button to show a form that will let me add a new color.

  * Note that you can give an input a type of color if you’re trying to select a color. (The route here should be /colors/new)

* As a user, when I submit my new color form, I am redirected to the colors index, and my new color appears at the top.

* As a user, if I try to navigate to a color page that does not exist (eg, /colors/blargh), I am redirected to the colors index page.

* As a user, if I try to navigate to an invalid url (eg, /this-is-not-valid), I am redirected to the colors index page

## Further Study - React Router Calculator

A calculator that supports routes like:

* /add/1/2

  * should render a component that displays 3.

* /subtract/3/2

  * should render a component that displays 1.

* /multiply/6/4

  * should render a component that displays 24.

* /divide/20/5

  * should render a component that displays 4.