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

Static output drops query parameters from useRouter().url after hydration

Fechada
  • Algo errado?
#449 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

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

Direção de pesquisa

Start by locating the React adapter's RouteResource and the router facade that compares the browser URL with pageData.url; the report identifies this as the suspected failure point. Reproduce with a static build and the provided /ssg?foo=bar#baz URL, then check the router's query string and searchParams after hydration. Done means the pathname still selects the static page while the router exposes the visitor's query parameters.

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

Descrição

Description

In a fully static React Pages deployment, useRouter().url omits the visitor's query parameters, even though they remain in the browser address bar.

Versions:

Live reproduction

https://query-bug.yangshun.workers.dev/ssg?foo=bar#baz

After successful hydration, the page renders:

{
  "href": "https://query-bug.yangshun.workers.dev/ssg",
  "pathname": "/ssg",
  "search": "",
  "searchParams": [],
  "hash": "#baz"
}

The browser URL still contains ?foo=bar. There are no browser warnings or errors.

Steps to reproduce
  1. Configure a React Pages app for static output:
// void.config.ts
import { defineConfig } from 'void/config';

export default defineConfig({
  target: 'cloudflare',
  output: 'static',
});
  1. Add a page that displays the router's query string:
// pages/ssg.tsx
import { useRouter } from '@void/react';

export default function Ssg() {
  const router = useRouter();
  return <pre>{router.url.search || '(empty)'}</pre>;
}
  1. Ensure there are no pages with prerender = false or other server features.
  2. Deploy using npx void deploy. The CLI identifies the deployment as Static Site.
  3. Open /ssg?foo=bar.

This also reproduces when serving the generated static files locally:

pnpm exec void prepare
pnpm exec vite build
python3 -m http.server 4173 --directory dist/client

With Python's static server, open http://localhost:4173/ssg.html?foo=bar#baz.

Expected

router.url.search is "?foo=bar", and router.url.searchParams.get('foo') returns "bar".

Actual

router.url.search is "", and router.url.searchParams is empty.

Framework comparison

With Void and all adapters at 1.1.11, Vue 3.5.44, Svelte 5.57.2, and Solid 1.9.17 all preserve ?foo=bar and #123 after hydration in local static production builds, without browser errors. Only React loses the query string; React was also verified on Cloudflare. This appears React-specific.

Suspected cause

The prerendered __VOID_PAGE_DATA__ payload contains "url":"/ssg".

In the React adapter's RouteResource, the router facade compares the browser's pathname plus search against pageData.url. Because /ssg?foo=bar differs from /ssg, it falls back to the build-time URL, losing the query parameters.

Selecting static files by pathname is correct, but the client router should still expose the visitor's query parameters.

Linguagem predominante
TypeScript
Estrelas
402
Forks
32
Merge médio
12h 1min
PRs com merge (30d)
80

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

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 voidzero-dev/void

Todas as issues de voidzero-dev/void

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.