kentcdodds / kentcdodds/react-workshop-app
404 handling doesn't work
- Dominant language
- TypeScript
- Stars
- 151
- Forks
- 36
- PR merge metrics
- No merged PRs in 30d
Description
- `@kentcdodds/react-workshop-app` version: 2.19.2
- `node` version: 14.12.0
- `npm` version: 6.14.8
What you did:
Navigated to a spurious route, e.g. `/abcdef` or an exercise that didn't exist, e.g. `/99`
What happened:

When instead the NotFound component should have been rendered.
Reproduction repository:
You can reproduce this on any downloaded course section
Problem description:
The NotFound component is not rendered when an invalid URL is navigated to.
This is happening because:
1. The `/:exerciseNumber` route is not scoped to just capture numbers, but any url. Therefore no url ever reaches the NotFound catch all route.
2. The `ExerciseContainer` component does not check the bounds of `exerciseInfo`, so if the exerciseNumber passed in is invalid (either a string or a number outside of the defined exercises) the app crashes with a destructuring error as shown above.
Suggested solution:
1. Scope the `/:exerciseNumber/` route to only accept numbers, via regex. This should fix 404 handling for non number parameters.
2. Add a bounds check and render NotFound in ExerciseContainer if the number passed is not found in `exerciseInfo`.
I'd be happy to submit a PR for the changes if desired.
Contributor guide
Research direction
Start by locating the route definitions for the exercise number and the ExerciseContainer component, then run the app and navigate to an invalid path such as /abcdef or /99. Verify that numeric route matching and invalid exercise bounds reach the NotFound component instead of crashing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100