[Bug]: two pages render simultaneously #2297

import { createAsync, query, Route, Router } from "@solidjs/router";
import { For, Suspense } from "solid-js";
const getVideos$ = query(async () => {
  "use server";
  await new Promise((r) => setTimeout(r, 1000));

  return [{ title: "hi", thumb: "https://picsum.photos/200/300" }];
}, "videos");

const getVideo$ = query(async () => {
  "use server";
  await new Promise((r) => setTimeout(r, 1000));
  return { title: "hi", thumb: "https://picsum.photos/200/300" };
}, "video");

export default function Home() {
  return (
    <Router>
      <Route
        path="/"
        component={() => {
          const videos = createAsync(() => getVideos$());

          return (
            <Suspense fallback={<p>Loading...</p>}>
              <For each={videos()}>
                {(video) => (
                  <a href="/video">
                    <h1>{video.title}</h1>
                    <img src={video.thumb} />
                  </a>
                )}
              </For>
            </Suspense>
          );
        }}
      />
      <Route
        path="/video"
        component={() => {
          const video = createAsync(() => getVideo$());
          return (
            <Suspense fallback={<p>Loading...</p>}>
              {video()?.title}
              <img src={video()?.thumb} />
            </Suspense>
          );
        }}
      />
    </Router>
  );
}