[Bug]: two pages render simultaneously
Open
Nobody has claimed this yet.
bug
- Dominant language
- TypeScript
- Stars
- 5.9k
- Forks
- 426
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 11
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
No response
Expected behavior 🤔
No response
Steps to reproduce 🕹
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>
);
}
do exactly what's in the video:
https://github.com/user-attachments/assets/94d33e7e-09e7-4846-a799-4f2b6385bb25
Context 🔦
No response
Your environment 🌎
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with the TypeScript example in the issue and comparing the result with the linked video. Trace the Router and Route rendering during navigation from "/" to "/video"; done means only the active page is rendered after navigation, with the loading states still behaving as expected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Needs clarification
- Newbie friendliness
- 38/100