Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

`useBeforeLeave` and scroll restoration break on Back after 50 history entries (`_depth` taken from the capped `history.length`)

Fechada
  • Algo errado?
#694 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Um pull request relacionado já foi integrado.

  • #708 de @sarankumar1325 — integrado

Avaliação

Dificuldade
4/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
57/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
typescript
Domínio
frontend

Direção de pesquisa

Start by reading saveCurrentDepth() and notifyIfNotBlocked in src/lifecycle.ts, then trace set() in src/routers/history.ts on next and the matching router code in src/routers/scrollRestoration.ts. Check how depth is assigned after the browser history reaches its entry cap and how Back and Forward use it. Done means navigation blocking and scroll restoration work across the cap, including after going Back and pushing a new entry.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

1.x
Describe the bug

saveCurrentDepth() (src/lifecycle.ts) stamps a new entry with _depth: window.history.length - 1:

export function saveCurrentDepth() {
  if (!window.history.state || window.history.state._depth == null) {
    window.history.replaceState({ ...window.history.state, _depth: window.history.length - 1 }, "");
  }
  depth = window.history.state._depth;
}

Chromium (kMaxSessionHistoryEntries) and Firefox (browser.sessionhistory.max_entries) cap the session history at 50 entries (WebKit at 100, not tested). Once it is full, pushState drops the oldest entry and history.length stays at 50, so every new entry gets the same _depth as the one below it.

Everything keyed on _depth then misbehaves between those entries:

  • notifyIfNotBlocked (src/lifecycle.ts): Back from the newest entry computes delta = 0, so if (delta && block(delta)) skips block: useBeforeLeave listeners are never called and the navigation can't be prevented.
  • createScrollRestoration (src/routers/scrollRestoration.ts, same path on next): positions are stored per depth, so consecutive entries share one slot, and onPush() deletes every key >= depth. Back restores the offset of the entry just left instead of its own.

Present in 1.0.0 (latest on npm) / main (set() in Router and HashRouter), and on next (2.0.0-next.42) in src/routers/history.ts (saveCurrentDepth, set() in browserHistory() and hashHistory()), where scroll restoration is on by default with the default browser history, so it hits without opting in.

Your Example Website or App

Minimal code below; no hosted repro needed, it shows from the console in any Chromium or Firefox tab.

Steps to Reproduce the Bug or Issue

Fresh tab (so the history starts at length 1):

import { render } from "solid-js/web";
import { Router, Route, useNavigate, useBeforeLeave, useParams } from "@solidjs/router";

function Page() {
  const params = useParams();
  (window as any).nav = useNavigate();
  useBeforeLeave((e) => {
    if ((window as any).guard && !confirm("Leave?")) e.preventDefault();
  });
  return <p>page {params.n}</p>;
}

render(
  () => (
    <Router>
      <Route path="/:n?" component={Page} />
    </Router>
  ),
  document.getElementById("root")!,
);

In the console:

for (let i = 1; i <= 52; i++) {
  nav(`/${i}`);
  await new Promise((r) => setTimeout(r));
  console.log(i, history.length, history.state._depth);
}

Then run guard = true and press the browser Back button.

Expected behavior
  • _depth equals i on every line: the last three print 50, 51, 52.
  • Back triggers the useBeforeLeave confirm.

Actual:

  • From i = 50 on, history.length stays 50 and _depth stays 49 (Firefox: 50, as it applies its cap asynchronously).
  • Back navigates to /51 without the confirm (delta is 0). With <Router scrollRestoration> and a page taller than the window, scrolled before the last push, Back restores the offset of the entry just left.

Below the cap (e.g. Back from /10) the confirm shows and blocking works.

Platform
  • OS: Linux
  • Browser: Chromium 156.0.8078.4, Firefox 157
  • @solidjs/router: 1.0.0 (same code on next 2.0.0-next.42)
Additional context

Suggested fix: stamp each entry the router pushes from the depth of the entry it leaves, rather than from history.length. depth isn't exported from lifecycle.ts, so e.g. a small helper there:

export const nextDepth = () => depth + 1;
// in set() of Router / HashRouter:
window.history.pushState({ ...state, _depth: nextDepth() }, "", value);

and the fallback in saveCurrentDepth() becomes _depth: depth == null ? window.history.length - 1 : depth + 1, so entries pushed outside the router (e.g. location.hash) keep counting up past the cap too.

depth + 1 equals today's value below the cap, including after going Back (pushState drops the forward entries). A Math.max(history.length - 1, depth + 1) variant is wrong there: history.length is read before the forward entries are dropped, so after going Back 3 entries and navigating, the new entry is over-stamped, so a Back that useBeforeLeave prevents still goes through: the listener sees delta -3 instead of -1, and the router's go(3) undo has no forward entries to return to. With the change above, I checked in Chromium and Firefox that Back and Forward past the cap are blocked, scroll is restored, and a reload keeps the stamped depth. replace goes through keepDepth, which the change doesn't touch (from reading the code).

Linguagem predominante
TypeScript
Estrelas
1.3k
Forks
185
Merge médio
21h 18min
PRs com merge (30d)
50

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de solidjs/solid-router

Todas as issues de solidjs/solid-router

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.