Forward pressed while a Back navigation is still loading is dropped; the URL and the rendered route get out of sync
Los mantenedores suelen responder en 1 día
Evaluación
- Dificultad
- 4/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 54/100
- Tipo de issue
- Error
- Claridad
- Bien especificado
- Estado de actividad
- Activo
- Stack tecnológico
- javascript, typescript
- Área
- frontend
Línea de trabajo
Start in src/routing.ts at the transition() comparison around lines 487–488, then inspect navigateFromRoute() around lines 613–615, which makes a similar comparison. Reproduce Back → Forward while the /slow resource is pending using the inline Vite example and compare the proposed pending-target check with the route-click path. Done means browser history and the rendered route plus useLocation() stay in sync for both cases; run the router test suite after changes.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Describe the bug
Press Back, then press Forward before the route that Back entered has finished loading. The Forward is dropped:
- the address bar shows the Forward location;
- once the pending data resolves, the router commits and renders the Back location;
useLocation()reports the Back location.
The app stays out of sync with the URL until the user navigates to another route or reloads. A link to the rendered route does nothing, because the router believes it is already there.
The cause is that transition() returns early when the target equals reference():
While the Back transition is pending, reference() read outside it still holds the committed location, which is the page we were on before Back. Forward targets that same location, so transition() treats it as a no-op, and the pending Back transition then commits.
We hit this in a production app on pages whose data loads on entry.
Your Example Website or App
The repro is inline below, with no StackBlitz link. It is Vite + vite-plugin-solid, and its only runtime dependencies are solid-js 1.9.15 and @solidjs/router (0.15.4 or 1.0.0).
// src/main.jsx
import { render } from "solid-js/web";
import { createResource, Suspense } from "solid-js";
import { Router, Route, A, useLocation } from "@solidjs/router";
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
function Home() {
return <h1>Home</h1>;
}
// Its data takes 500 ms, so entering /slow (also via Back) is a pending transition for 500 ms
function Slow() {
const [data] = createResource(() => wait(500).then(() => "loaded"));
return <h1>Slow ({data()})</h1>;
}
function Fast() {
return <h1>Fast</h1>;
}
render(
() => (
<Router
root={(props) => (
<>
<nav>
<A href="/">home</A> | <A href="/slow">slow</A> | <A href="/fast">fast</A>
</nav>
<p id="loc">useLocation: {useLocation().pathname}</p>
<Suspense>{props.children}</Suspense>
</>
)}
>
<Route path="/" component={Home} />
<Route path="/slow" component={Slow} />
<Route path="/fast" component={Fast} />
</Router>
),
document.getElementById("app")
);
Steps to Reproduce the Bug or Issue
- Open
/, click slow, and wait until the page shows "Slow (loaded)". - Click fast.
- Press browser Back, then Forward before
/slow's 500 ms resource resolves.
Expected behavior
The page shows "Fast" at /fast.
Actual behavior:
- the address bar shows
/fast; - the page shows "Slow (loaded)";
useLocation().pathnameis/slow.
Clicking slow then changes nothing. Clicking fast recovers.
I measured this with Playwright, pressing Forward right after Back:
- Chromium 145: out of sync in 10 of 10 runs on 0.15.4, and in 10 of 10 on 1.0.0;
- Firefox 146 and WebKit 26: out of sync in 5 of 5 runs each, on 1.0.0.
With Forward 1 s after Back, after the resource had resolved, every run was correct.
Platform
- OS: Windows 11
- Browser: Chromium 145, Firefox 146, WebKit 26 (Playwright builds)
- Version:
@solidjs/router0.15.4 and 1.0.0,solid-js1.9.15.mainhas the same code. 2.0.0-next is a different implementation, and I did not test it.
Additional context
A possible fix is to compare against the pending target when there is one:
const current = lastTransitionTarget || { value: reference(), state: state() };
if (newTarget.value === current.value && newTarget.state === current.state) return;
With this change applied to the built bundle, Back → Forward ends on "Fast" in 10 of 10 runs on 0.15.4 and on 1.0.0. I have not run the router's test suite against it.
navigateFromRoute makes the same comparison with reference() (L613-L615). Clicking slow and then fast at once stays on /slow in 10 of 10 runs. URL and page agree there, but the second click is lost. The change above does not cover that path.
- Lenguaje dominante
- TypeScript
- Estrellas
- 1.3k
- Forks
- 183
- Merge medio
- 14 h 35 min
- PR fusionados (30 d)
- 52
Preparar el entorno
- Sin Dockerfile ni archivo de Docker Compose
- Sin plantilla de pull request
- Leer la guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de solidjs/solid-router
-
<A> costs ~6us of server CPU per instance during SSR (20x a plain <a>), mostly mergeProps/splitPropsPosiblemente ocupada @birkskyum la tomó hace 72 días. Abierto1.x
Dificultad 4/5 3-5 días Aptitud para principiantes 55/100
solidjs/solid-router#583 ·
Los mantenedores suelen responder en 1 día
-
1.x enhancement
Dificultad 3/5 1-2 días Aptitud para principiantes 38/100
solidjs/solid-router#518 · 2 comentarios ·
Los mantenedores suelen responder en 1 día
-
Dificultad 4/5 3-5 días Aptitud para principiantes 35/100
solidjs/solid-router#482 · 2 comentarios ·
Los mantenedores suelen responder en 1 día
-
enhancement
Dificultad 4/5 3-5 días Aptitud para principiantes 25/100
solidjs/solid-router#459 · 2 comentarios ·
Los mantenedores suelen responder en 1 día
-
handleAnchor and `blob` linksPosiblemente ocupada @aashish00021 la tomó hace 81 días. Abierto1.x enhancement
Dificultad 3/5 1-2 días Aptitud para principiantes 35/100
solidjs/solid-router#382 · 4 comentarios ·
Los mantenedores suelen responder en 1 día
Todos los issues de solidjs/solid-router
Issues similares
-
bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 67/100
mobile-next/mobile-mcp#526 ·
Los mantenedores suelen responder en 1 día
-
e2e-failure ready-to-code
Dificultad 1/5 Menos de una hora Aptitud para principiantes 73/100
redhat-developer/rhdh-plugin-export-overlays#4470 · 1 comentario ·
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
anthropics/anthropic-sdk-typescript#1273 ·
Los mantenedores suelen responder en 10 días
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 82/100
CopilotKit/OpenBot#815 ·
Los mantenedores suelen responder en 1 día