Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
#298 2 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
typescript
Ambito
frontend, web-dev

Direzione di ricerca

Riproduci il problema nel CodeSandbox collegato con due istanze di Router, quindi esamina la gestione dei clic a livello di documento del componente A e il percorso di contesto/integrazione di Router. Conferma che i clic all'interno di ciascun Router chiamino il setter di integrazione di quel Router e verifica il comportamento rispetto ai passaggi di riproduzione elencati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
1.3k
Fork
180
Merge medio
1g 10h
PR unite (30g)
19

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di solidjs/solid-router

Tutte le issue di solidjs/solid-router

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.