[Snyk] Security upgrade react-router-dom from 5.3.4 to 6.30.2

[jakexcosme]

Snyk has created this PR to fix 1 vulnerabilities in the npm dependencies of this project.

Snyk changed the following file(s):

• frontend/package.json
• frontend/package-lock.json

Vulnerabilities that will be fixed with an upgrade:

	Issue	Score
	Open Redirect SNYK-JS-REACTROUTER-14908286	641

---

Important

• Check the changes in this PR to ensure they won't cause issues with your project.
• Max score is 1000. Note that the real score may have changed since the PR was raised.
• This PR was automatically created by Snyk using the credentials of a real user.

---

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open fix PRs.

For more information:
🧐 View latest project report
📜 Customise PR templates
🛠 Adjust project settings
📚 Read about Snyk's upgrade logic

---

Learn how to fix vulnerabilities with free interactive lessons:

🦉 Open Redirect

---

[devin-ai-integration]

Devin Review found 1 potential issue.

View issue and 2 additional flags in Devin Review.

[devin-ai-integration]

🔴 react-router-dom v5 to v6 upgrade without code migration breaks entire application

Upgrading react-router-dom from v5 (^5.3.4) to v6 (^6.30.2) without updating the application code will cause the entire frontend to fail at runtime.

Click to expand

Breaking Changes Not Addressed

React Router v6 is a major breaking change that removes/renames many APIs used throughout this codebase:

1. useHistory hook removed (50 usages) - Replaced with useNavigate in v6

   • Files affected: RouteGuard.tsx, Header.tsx, Vulnerability.tsx, Organizations.tsx, LoginGovCallback.tsx, OktaCallback.tsx, TermsOfUse.tsx, and many more
   • Example at frontend/src/components/Routes/RouteGuard.tsx:29:

   const history = useHistory(); // This will throw: useHistory is not a function

2. Switch component removed (12 usages) - Replaced with Routes in v6

   • Files affected: Routes.tsx:27, Scans.tsx:26

   import { Route, Switch } from 'react-router-dom'; // Switch doesn't exist in v6

3. Redirect component removed (10 usages) - Replaced with Navigate in v6

   • File affected: AuthRoute.tsx:2

   import { RouteProps, Redirect, Route } from 'react-router-dom'; // Redirect doesn't exist in v6

4. Route component prop changes - component prop removed, replaced with element

   • All route definitions use the old v5 API:

   <Route exact path="/terms" component={TermsOfUse} /> // v5 syntax
   // v6 requires: <Route path="/terms" element={<TermsOfUse />} />

5. RouteProps type changed (8 usages) - The type interface is completely different in v6

Impact

The application will fail to start or crash immediately when any routing code is executed. Users will see a blank page or error screen.

Recommendation: Either revert the react-router-dom version back to ^5.3.4, or complete the full migration by updating all components to use v6 APIs: replace useHistory with useNavigate, Switch with Routes, Redirect with Navigate, and update all Route components to use the element prop instead of component.

---

Was this helpful? React with 👍 or 👎 to provide feedback.