Expose history for in-memory routers

[chas-bean]

Hello, hope you are well! Thanks for the library its been great

My team is using react-router@v6 for a Chrome extension, specifically for the pop-up script. We are using the createMemoryRouter function to create an in-memory router, as our extension can't use the normal browser URL navigation, same as any native application (e.g. React Native)

This allows us to have separate routes / pages in our extension, within that little pop-up window, and we have a custom back button that calls the new navigate(-1) API to navigate backwards manually

However we have a problem: we can't hide or disable the back button if there is nowhere to go back to because the in-memory history state is not exposed. Ideally we would be able to access the in-memory history for our router and check if the length is > 1, then allow going backwards, otherwise hide the button

I tried to workaround by using the UNSAFE_DataRouterContext, via property router.window.history.length, but this length seems to always be 1. Perhaps it is a bug with navigating to the current route again (e.g. for page/:id our app can go from /page/1 to /page/2) or perhaps there is a bug in the in-memory implementation? Or maybe this is not the wrong way to access this info?

I looked through the source code, and noticed the MemoryHistory interface exposes an index() getter, and also perhaps a length, so I was hoping that could somehow be exposed for us to use, so we can hide the back button

Let me know if you need a more concrete example or some sample code, thanks for the consideration

[AntiCodingCodingLab]

I was also looking for a solution and couldn't find one, so I wrote my own.:

import { useLocation, useNavigate } from "react-router";

const [routerHistory, setRouterHistory] = useState<string[]>([]);
const navigate = useNavigate();
const location = useLocation();

const goBack = useCallback(() => {
    navigate(-1);
    setRouterHistory((prev) => prev.slice(0, -1));
}, []);

useEffect(() => {
    if (routerHistory[routerHistory.length - 1] == location.pathname) {
        return;
    }
    setRouterHistory((prev) => [...prev, location.pathname]);
}, [location.pathname]);
  
useEffect(() => {
    if (routerHistory.length == 1) {
        backButton.hide();
    } else {
        backButton.show();
    }
}, [routerHistory]);