aws / aws/graph-explorer

Derive nav active state from the URL instead of passing an `active` prop

Open
#1,846 0 comments 0 reactions 0 assignees View on GitHub
internal needs-triage tech debt
Dominant language
TypeScript
Stars
481
Forks
108
Avg merge
8d 9h
Merged PRs (30d)
7

Description

Each route renders `` and hand-passes its own identity (`graph-explorer`, `data-explorer`, `schema-explorer`, `connections`, `settings`) across 5 call sites. The nav bar already knows every route's path, so active state should derive from the current URL rather than being threaded in by each page.

Replace the `active` prop with React Router's `` / `useMatch` so `RouteButton` computes its own active state. `SettingsRoot` already uses `NavLink` this way — this brings the main nav in line.

**Affected files:** `components/RouteButton.tsx`, and the 5 call sites: `routes/GraphExplorer/GraphExplorer.tsx`, `routes/DataExplorer/DataExplorer.tsx`, `routes/SchemaExplorer/SchemaExplorer.tsx`, `routes/Connections/Connections.tsx`, `routes/Settings/SettingsRoot.tsx`.

**Outcome:** `active` prop and all 5 arguments removed; active styling driven by `NavLink` `isActive` / `useMatch`. No user-facing behavior change.

> [!IMPORTANT]
> Internal only — this issue is maintained by the core team and is not accepting external contributions.

Contributor guide

Open the contributing guide

Research direction

Start with components/RouteButton.tsx and compare its current active prop handling with the NavLink usage in routes/Settings/SettingsRoot.tsx. Review the five listed route call sites, then verify that the active prop and five arguments are removed and that active styling is driven by the URL without changing user-facing behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.