Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Link click handling breaks the <Router> isolation/context principle

Abierto
#298 2 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
frontend, web-dev

Línea de trabajo

Reproduce el problema en el CodeSandbox enlazado con dos instancias de Router y, a continuación, inspecciona el manejo de clics a nivel de documento del componente A y la ruta de contexto/integración de Router. Confirma que los clics bajo cada Router invocan el setter de integración de ese Router y verifica el comportamiento según los pasos de reproducción indicados.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement
Describe the bug

I'm making the assumption here that this package supports multiple routers running at the same time as it does use context for isolation instead of some kind of global store. Described bug is not an issue if my assumption is wrong.

Router component provides context which isolates and enforces the scope of router functionality.
For example useLocation under <Router> returns the location for that particular router.

Link click handling (A component) breaks that principle and functionality because link click event handler is added to document and if you have multiple routers (with default integration or custom), only one integration setter will be always called.

I propose to handle it in some sort of scoped way, for example:
<Router scopeEl={htmlElementRef} source={integration}> and

const target = args.scopeEl || document;
target .addEventListener("click", handleAnchorClick);

Or a bit more advanced (and potentially buggy): automatically find the nearest parent HTML element for <Router>.

Your Example Website or App

https://codesandbox.io/s/solid-app-router-example-forked-25ysls?file=/Index.js

Steps to Reproduce the Bug or Issue
  1. Go to Home (/) if not already there and open console
  2. Click on any of the "Post X (modal)" links
  3. Clear console log
  4. Click on any of the "Post X (modal)" links in modal (links under router 2)

You can see in logs [router 1] set global loc: that even though this link is rendered under second <Router>, it will still invoke the setter for first <Router> integration.

Expected behavior

Link behaviour respects the context.
Link rendered under <Router1 source={integration1}> should invoke the integration1 setter.
Link rendered under <Router2 source={integration2}> should invoke the integration2 setter.

Screenshots or Videos

No response

Platform
  • OS: any
  • Browser: any
  • Version: 0.8.3
Additional context

No response

Lenguaje dominante
TypeScript
Estrellas
1.3k
Forks
180
Merge medio
1 d 10 h
PR fusionados (30 d)
19

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de solidjs/solid-router

Todos los issues de solidjs/solid-router

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.