Page content not updating on route change

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>
  );
}

<a
  href={'/information/' + information.id}
  onclick={doSomeOtherStuff}
>