Skip to content

refactor(ui/dashboard): migrate unsaved-page blocker to react-router useBlocker - #2574

Draft
steveninhle wants to merge 1 commit into
mainfrom
refactor/unsaved-page-use-blocker
Draft

refactor(ui/dashboard): migrate unsaved-page blocker to react-router useBlocker#2574
steveninhle wants to merge 1 commit into
mainfrom
refactor/unsaved-page-use-blocker

Conversation

@steveninhle

Copy link
Copy Markdown
Collaborator

Summary

  • Migrates the router from to createBrowserRouter + RouterProvider
  • Replaces the UNSAFE_NavigationContext / monkey-patched navigator hack with React Router's stable useBlocker API for intercepting in-app navigation when there are unsaved changes
  • Extracts AuthProvider into an AuthShell wrapper using to fit the new data router route config structure
  • Removes the manual popstate listener + history.pushState trick — useBlocker natively handles back/forward navigation

@steveninhle steveninhle changed the title refactor(ui): migrate unsaved-page blocker to react-router useBlocker refactor(ui/dashboard): migrate unsaved-page blocker to react-router useBlocker May 25, 2026
@steveninhle
steveninhle force-pushed the refactor/unsaved-page-use-blocker branch from 088b4c1 to be25641 Compare June 26, 2026 03:49
@steveninhle
steveninhle force-pushed the refactor/unsaved-page-use-blocker branch 2 times, most recently from 0bbd84b to 6830d25 Compare August 11, 2026 04:41
@steveninhle
steveninhle force-pushed the refactor/unsaved-page-use-blocker branch from 6830d25 to 9c2c303 Compare August 26, 2026 08:14
@t-kikuc
t-kikuc requested a balanced review from Copilot August 28, 2026 07:24

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Migrates dashboard navigation blocking to React Router’s data-router APIs.

Changes:

  • Replaces BrowserRouter with createBrowserRouter.
  • Migrates unsaved-change handling to useBlocker.
  • Moves navigation bypass handling into ConfirmProvider.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
app/index.tsx Adds data-router configuration and AuthShell.
use-unsaved-leave-page.tsx Implements blocker-based navigation confirmation.
my-projects.tsx Uses context-provided navigation bypass.
switch-organization.tsx Uses context-provided navigation bypass.
segment-form/index.tsx Bypasses blocking after successful saves.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

bypassRef.current = false;
return false;
}
if (isWalkthroughActive()) return false;

const instanceId = useRef(++nextInstanceId).current;

const blocker = useBlocker(
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants