react-router-guards icon indicating copy to clipboard operation
react-router-guards copied to clipboard

Fix nested route changes triggering parent guards

Open joshpensky opened this issue 3 years ago • 0 comments

Description

The current way we are tracking route changes is through a changing location pathname; unfortunately, this location change is true for both parent and child nested routes, causing both guards to be triggered.

This PR introduces a new route change detection function, which checks the route path and params (instead of just comparing the location pathname)

Related issues

Fixes #59

What this does

  • Updates hasPathChanged -> hasRouteChanged, updates detection to check match.* instead of location.*
  • Removes null render for when route has changed but without guards
  • Updates intermediate demo to use nested route on Pokémon detail page
    • Updates RRDom to 5.3.0 to take advantage of the useRouteMatch hook helper

How to test

  1. Visit the intermediate demo
  2. Open a Pokémon page. Confirm the parent route loader appears, then the child route loader
  3. Click on a sublink in the page (Physique, Statistics, Moves). Confirm only the child route loader appears
  4. Click on a previous or next link. Confirm the parent route loader appears, then the child route loader

joshpensky avatar Sep 15 '21 15:09 joshpensky