Migrate to new Data API

[Sagie501]

Hi!
I want to migrate my react application to the new Data API using createHashRouter and RouterProvider.
My application JSX tree looks like that:
main.tsx:

root.render(
    <StrictMode>
        <HashRouter>
            <App />
        </HashRouter>
    </StrictMode>,
);

App component:

export const App: FC = () => {
    const location = useLocation();

    useEffect(() => {
        // Doing something with the location.pathname here
    }, [location.pathname]);

    return (
        <Routes>
            <Route path="/" element={<Home />} />
            {/* More Route components here */}
        </Routes>
    );
};

The useLocation hook must be under the HashRouter.
I can't figure out how can I achieve the same behavior with the new Data API.

That what I tried:
main.tsx:

root.render(
    <StrictMode>
        <App />
    </StrictMode>,
);

App component:

const router = createHashRouter(
    createRoutesFromElements(
        <>
            <Route path="/" element={<Home />} />
            {/* More Route components here */}
        </>,
    ),
);

export const App: FC = () => {
    const location = useLocation();

    useEffect(() => {
        // Doing something with the location.pathname here
    }, [location.pathname]);

    return <RouterProvider router={router} />;
};

But as expected I am getting an error: useLocation() may be used only in the context of a <Router> component.
I need that side effect will occur to all routes so implement the useEffect in each route doesn't makes sense.
I would appreciate any help, thanks!

[Sagie501]

Any help here would be appreciated

[brophdawg11]

This is because you're using useLocation outside of RouterProvider. Instead, you can move anything global like the outer logic in your App component to a root layout component so it's inside the router:

const router = createHashRouter(
    createRoutesFromElements(
        <Route element={<Layout />}>
            <Route path="/" element={<Home />} />
            {/* More Route components here */}
        </Route>,
    ),
);

const Layout: FC = () => { 
    const location = useLocation();

    useEffect(() => {
        // Doing something with the location.pathname here
    }, [location.pathname]);
    
    return <Outlet />
}

export const App: FC = () => {
    return <RouterProvider router={router} />;
};