Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

catchNavigation click causes error when using hash for routing #21

Open
chrishoage opened this issue Jun 6, 2021 · 0 comments · May be fixed by #22
Open

catchNavigation click causes error when using hash for routing #21

chrishoage opened this issue Jun 6, 2021 · 0 comments · May be fixed by #22

Comments

@chrishoage
Copy link

// Attempt to match the selector from that root. querySelector' doesn't support IDs that start with a digit, so work around that limitation
const elementMatch = hash.match(ID_WITH_LEADING_DIGIT_REGEXP) != null ? root.getElementById(hash.slice(1)) : root.querySelector(hash);

hash from an anchor is passed directly to root.querySelector with our regard for what might be contained in the hash.

Hash-routing libraries store the route in the hash. For example an anchor tag may have #!/foo/bar as the value for the href.

Passing this value to root.querySelector causes an error, for example SyntaxError: The string did not match the expected pattern. in safari or Uncaught DOMException: Document.querySelector: '#!/foo' is not a valid selector in FIrefox.

This could be solved in two ways:

  1. a simple try/catch
  2. further expand the regex to allow for detecting a valid query selector string before passing it to querySelector

@wessberg if you have a preference between the two approaches (or have an alternative suggestion) I am happy to open a PR that fixes the bad assumption around what can live in a hash.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant