#Logging current route/page being loaded

1 messages · Page 1 of 1 (latest)

solemn temple
#

Hi! Currently in my route files I log the following:

console.log('page_loaded');

and I would like to have this sort of log on every page/route in my app which results in duplicate code. is there a central place in remix where I can listen to route changes and log the route/page that is being loaded?

digital tiger
pliant shale
#

You can use remix utils, which has a series of global loader contexts you can listen to

solemn temple
#

nice thanks for the suggestion. I gave it a try and am able to log the current pathname. what do you mean by remix utils?

#

is this from npm i remix-utils?

digital tiger
solemn temple
#

yeah I'm still looking at the docs as well and can't seem to find anything. that might help here. I could be missing it

digital tiger
#

Does useLocation works for you?

#

The other way is to have a loader on root.tsx:

export function loader({ request }: DataFunctionArgs) {
    console.log(new URL(request.url).pathname);

    return null;
}

But It will work only on the first document load.
root loader is not rerun on navigate.

solemn temple
#

yeah, thank you. using useLocation().pathname seems to be working just fine. instead of logging 'page_loaded' in my components I moved it into the App component in root.tsx to log 'loading route ${pathname}'

#

its important that it logs on every route change and not just on first document load

digital tiger
#

It is the best place for that 😉

solemn temple
#

thank you very much for your help 🙂

pliant shale
#

Normally for the route of the current page in my root loader I return the URL like Raphael is suggesting

#

but to determine if they're all finished loading/updating you check the global states on the client side