Add useInDataRouterContext hook

[fzaninotto]

Problem

New hooks like useBlocker can only be called from within a DataRouterContext. In the context of react-admin, we want to support apps with both a legacy router context and a data router context. Therefore we need to detect if we are in a data router context or not.

Since the DataRouterContext isn't exported by react-router, we need to rely on UNSTABLE_ exports:

import { UNSAFE_DataRouterContext } from 'react-router';

function MyComponent() {
    const dataRouterContext = useContext(UNSAFE_DataRouterContext);
    return (
        <>
           {dataRouterContext && <SomeComponentDependentOnDataRouter />
       </>
    );
};

Solution

Just like react-router exposes a useInRouterContext hook, expose a (stable) useInDataRouterContext hook so that we can write:

import { useInDataRouterContext } from 'react-router';

function MyComponent() {
    const dataRouterContext = useInDataRouterContext();
    return (
        <>
           {dataRouterContext && <SomeComponentDependentOnDataRouter />
       </>
    );
};