Using a <Link> component to navigate to the current route does not update data about solid-router HOT 2 CLOSED

I think this is a case of needing more documentation on the matter. As you have found, the route data functions only execute initially when the route is matched and won't run again until that route is un-matched and then matched again. This aligns with Solid's concept of components which similarly only run initially when created.

In order to handle the scenario you have, you'll want to leverage the reactive nature of the params or location properties passed into the function and derive your result. So in this case, instead of creating a signal you could use a memo or even a simple function. If you have async data needs, use a resource with the first argument based on the reactive values.

function FooData({ params }: { params: Params}): Accessor<number> {
  return () => parseInt(params.id)
}

function FooData({ params }: { params: Params}): Accessor<number> {
  return createMemo(() => parseInt(params.id))
}

function FooData({ params }: { params: Params}): { id: number } {
  return {
    get id() {
      return parseInt(params.id)
    }
  }
}

function FooData({ params }: { params: Params}) {
  const [resource] = createResource(() => parseInt(params.id), (id) => /* fetch some data */);
  return resource;
}

from solid-router.

Got it. Ok yeah, looks like I'm still getting more familiar with the fundamentals of SolidJS. Brushing up on the documentation, this line now makes more sense:

Remember to access signals under a tracking scope if you wish them to react to updates. Tracking scopes are functions that are passed to computations like createEffect or JSX expressions.

If someone else stumbles upon this, I was using createResource in my actual app, but I was not creating a tracking scope for my parameters. So I was doing this:

function FooData({ params }: { params: Params}) {
  const [resource] = createResource(parseInt(params.id), (id) => /* fetch some data */);
  return resource;
}

instead of this

function FooData({ params }: { params: Params}) {
  const [resource] = createResource(() => parseInt(params.id), (id) => /* fetch some data */);
  return resource;
}

Thanks @rturnq!

from solid-router.