update to react-router v6

[jd2rogers2]

No description provided.

[EtoKruto]

CHANGES:

• Removed Alert Dialog and DetectFormData components as they are not compatible with V6 of React Router

  • Due to the lack of UseBlocker, UsePrompt is being removed from V6 until future compatibility.

• Changes made for V5 to V6 upgrade
  - Update useHistory to UseNavigate (all subsequent changes throughout)
  - Redirect changed to Switch
  - Route Components changed to “Element” props
  - Update Main.tsx to have Hierarchy for nested (relative) routes
  - Updated active style to match v6 docs

• Package JSON
  - Update Router to 6.4.3 (latest)
  - Update React Router Type to 5.3.3 (latest)

• Alert Dialog error - was being activated/rendered every time someone wrote in the form (checked using console.log in the AlertDialog component)

  • Two prompts come up when leaving the page - custom and non-custom (default)

LINKS USED:

MAIN changes and instructions: LINK

• V5 review

  • history.block usecase in V5 [removed] (LINK)
  • history.block and custom use prompt [removed] (LINK)

• Guide and Help V6

  • Possibly helpful StackOverflow for custom prompts in V6 with examples (LINK)
  • Customised confirm navigation prompt with React-Router v6 (LINK)
  • Main guide with migration (v5 to v6) (LINK)
  • Youtube example (LINK)

• UsePrompt/UseBlocker/workaround for user leaving the page

  • React Router v.6 usePrompt TypeScript (LINK)
  • Request to add usePrompt/useBlocker back into V6 (LINK) - Latest chat 11/10/22
  • UNSAFE_NavigationContext (for detecting navigation to other page in React Router v6) (LINK)
  • Detecting user leaving page with react-router-dom v6.0.2 (LINK) (LINK)

• Why V6 (LINK)

[EtoKruto]

See https://nonprofitcircle.slack.com/archives/C01S7ULQTRQ/p1668573000708159 for the latest discussion (November 15 - 2022)

• TLDR: Wins for going React Router V6 aren’t big enough to validate this work at the moment.
• Follow through once a. V6 is more refined with all the above errors validated, and b. There is a larger need/requirement based on possible future factors