Extra Rendering of Previous Route Component When Navigating with useNavigate

[dyb-dev]

I'm using React Router as a...

library

Reproduction

I have two sibling route components: Home and Login.

When executing the following navigation code in the Home component:

const navigate = useNavigate();
navigate("/login");

I observed the following behavior:

The loader function of the /login route executes first.
The Home component renders one additional time.
Finally, the Login component renders.
It is unclear why Home is being rendered again during the transition.

Additionally, the same behavior occurs when navigating back using:

navigate(-1);

After executing navigate(-1) inside the Login component, the Login component renders again before being unmounted, and then the Home component renders.

Is this the expected behavior, or is it a potential issue with React Router?

Home

const Home: React.FC = () => {

    const navigate = useNavigate()

    console.log("home")

    return (
        <section className="home">
            <h1>home</h1>

            <button
                onClick={async() => {

                    navigate("/login")

                }}
            >
                to login button
            </button>

            
        </section>
    )

}

Login

const Login: React.FC = () => {

    const navigate = useNavigate()

    console.log("login")

    return (
        <section className="login">
            <h1>login</h1>
            <button
                onClick={() => {

                    navigate(-1)

                }}
            >
                to test button
            </button>
        </section>
    )

}

router

const router = createBrowserRouter(
    [
        {
            path: "/home",
            loader: () => {

                console.log("home loading")

                return null

            },
            HydrateFallback: () => null,
            lazy: async() => ({ Component: (await import("@/views/home/home")).default })
        },
        {
            path: "/login",
            loader: () => {

                console.log("login loading")

                return null

            },
            HydrateFallback: () => null,
            lazy: async() => ({ Component: (await import("@/views/login/login")).default })
        },
    ],
)

System Info

OS: macOS
Node.js: v22.13.1
pnpm: v9.9.0
react-router-dom: ^7.1.5

Used Package Manager

pnpm

Expected Behavior

Expected Console Output:

Initial render of Home component:

home loading
home

Navigating from Home to Login:

login loading
login

Navigating back from Login to Home:

home loading
home

Actual Behavior

Actual Console Output:

Initial render of Home component:

home loading
home

Navigating from Home to Login:

login loading
home
login

Navigating back from Login to Home:

home loading
login
home

my-react-app.zip

[dyb-dev]

I have identified the issue, but I don't understand why it happens. I found that the unexpected behavior in the console only occurs when the loader option is added to the route configuration. When I remove the loader option from the route configuration, everything behaves as expected.

[timdorr]

This is expected behavior with a loader. Because the loader may take a long time to run, we re-render the useNavigate hook to ensure you're running navigations against the correct location.

its a non fixed bug thats why #7634