Search code examples
javascripturlroutessolid-js

is there an event like onRouteChange in SolidJs?


I need to run some logic every time the url changes.

My application uses solid-app-router https://github.com/solidjs/solid-router

How can I subscribe to router changes in SolidJS?


Solution

  • solid-app-router has a useLocation primitive (hook). useLocation gives access to location which is a store-like object meaning its properties are reactive.

    So, in one word, to have the chance to run code on every url change, all we have to do is to wrap location.pathname with a createEffect() hook

    import { useLocation } from "solid-app-router";
    
    
    export function MyComponent() {
    
        const location = useLocation();
    
        createEffect(() => {
           
            console.log(location.pathname);
        })
    
     // ...