Page content not updating on route change

I have the following page:
import { createAsync, useParams, type RouteDefinition } from '@solidjs/router';
import { Show, Suspense } from 'solid-js';
import { getInformationById } from '~/api';

export const route = {} satisfies RouteDefinition;

export default function InformationPage() {
  const params = useParams();
  const informationId = parseInt(params.id);
  const information = createAsync(async () => getInformationById(informationId), {
    deferStream: true,
  });

  return (
    <main class='w-full p-4 space-y-2'>
      <Suspense fallback={<p>Loading...</p>}>
        <Show when={information()} fallback={<p>Loading...</p>}>
          {(information) => (
            <>
              <h1>{information().name}</h1>
            </>
          )}
        </Show>
      </Suspense>
    </main>
  );
}


I navigate using this, which works for any other route, as it seems:
<a
  href={'/information/' + information.id}
  onclick={doSomeOtherStuff}
>


If any other information are needed, please @ me.
Was this page helpful?