Skip to content

useBlocker does not work with memoryHistory #6393

Description

@rajzik

Which project does this relate to?

Router

Describe the bug

When using useBlocker with memoryRouter, blocked page is not blocked.

const Component = () => {

    useBlocker({
        shouldBlockFn: () => true,
    });

    useEffect(() => {
        navigate({ to: '/some-page' });
    }, [])

    return null;
}


const memoryHistory = createMemoryHistory({
    initialEntries: ['/'], // Pass your initial url
});

// Create a new router instance
export const router = createRouter({
    routeTree,
    scrollRestoration: true,
    history: memoryHistory,
});

// Register the router instance for type safety
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router;
    }
}

export type Router = typeof router;

Your Example Website or App

https://stackblitz.com/edit/github-g3ejtttf

Steps to Reproduce the Bug or Issue

  1. create memory history
  2. set router history in createRouter to memoryHistory
  3. use useBlocker with shouldBlockFn: () => true
  4. Page navigation is not blocked

Expected behavior

As a user I expected blocked navigation no matter the history I use.

Screenshots or Videos

No response

Platform

  • Router / Start Version: 1.150.0
  • OS: macOd
  • Browser: Chrome
  • Browser Version: 143.0.7499.193
  • Bundler: Vite
  • Bundler Version: 7.2.6

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions