[Bug]: ViewTransitionContext locations are out of sync with the browser

[Ivan Šinkarenko]

What version of React Router are you using?

6.23.0

Steps to Reproduce

Hi there!

I am using the context, in order to set up clues of navigation direction for specific view transitions, suggested here. It works with regular navigation, but gets quickly confused with browser history back/forward navigation. Pseudo code reproducer:

import { useContext } from 'react';
import { UNSAFE_ViewTransitionContext } from 'react-router-dom';

function useTracking() {
    const ctx = useContext(UNSAFE_ViewTransitionContext);
    if (ctx.isTransitioning === true) {
        console.log(`From ${ctx.currentLocation.pathname} to ${ctx.nextLocation.pathname}`);
    }
}

function PageA() {
     useTracking();
     return <NavLink to="/b" unstable_viewTransition />;
}

function PageB() {
    useTracking();
    return <NavLink to="/a" unstable_viewTransition />;
}

Now, if I start in Page A, go to Page B, and then press browser back button, it will console print twice From /a to /b. However, if at any point on Page B I will navigate to Page A by clicking NavLink, tracking seems to be restored (even when navigating using browser Back/Forward), and it will correctly print current and next locations.

I am testing this in Chromium 123.0.6312.105. Of course, I am not sure whether I am using the right tool for the task, but there's very little information on view transitions at the moment, so it's a guessing game.

Expected Behavior

Current and next location are consistently identified regardless of whether navigation is happening using links or browser history

Actual Behavior

Current and next location are becoming out of sync with the browser history

[Ivan Šinkarenko]

Update: In Google IO '24 they've announced view transition types, that help to achieve what I was trying to achieve with global classes here. More info: https://developer.chrome.com/blog/view-transitions-update-io24#view-transition-types. The hook from my example might not be needed anymore, but this new API will require an API update from react-router.