Allow a callback for when a route starts to change and when it has finished changing

[AsuraKev]

Are there any way react router can let us tap into the callback of before enter and after enter for when the route changes?

A use case of mine is that I want to display NProgress bar when i change route, doing it in useEffect is not accurate. I am using a data browser router, it would be great if react router can expose this functionality similar to what Vue has on their navigation guard

[Birkbjo]

I actually had an identical use case, and I solved it by using navigation.location?.key and location.key.
This way the key will reset the progressbar when a new navigation happens, but won't reset it at the end of the navigation.

If your not using react-nprogress, and actually want a callback, I guess you could use a similar approach and just do something like this:

    useEffect(() => { // or layoutEffect if you need before paint
        if (navigation.location?.key) {
            console.log("ON ENTER");
        } else {
            console.log("AFTER ENTER");
        }
    }, [navigation.location?.key]);


// or using prev-state pattern in render: 
    const [prevLocationKey, setPrevLocationKey] = React.useState(
        navigation.location?.key
    );

    if (prevLocationKey !== navigation.location?.key) {
        if (!navigation.location?.key) {
            console.log("AFTER ENTER");
        } else {
            console.log("ON ENTER");
            setPrevLocationKey(navigation.location?.key);
        }
    }

If you are using react-nprogress see code below or this PR that implements a progressbar using react-nprogress: https://github.com/dhis2/maintenance-app-beta/pull/330/files

    const navigation = useNavigation();
    const { key: locationKey } = useLocation();
    const isLoading = navigation.state === 'loading';
    // key is used to reset the state of the progress when location changes.
    // Cannot use navigation.location.key directly because navigation.location
    // will be undefined when navigation is not in a loading state, causing the animation
    // to cancel early because the key will change at the same time as isLoading.
    // Once navigation has finished, locationKey will be the same as previous (but now undefined)
    // navigation.location.key
    const resetKey = navigation.location?.key || locationKey;

    return <RouteProgressBar key={resetKey} isLoading={isLoading} />;

[AsuraKev]

wow, thanks a lot. I ll give this a shot. thankss