Giters

choojs / choo

:steam_locomotive::train: - sturdy 4kb frontend framework

Home Page:https://choo.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Query string parsing does not seem to be supported for hash routes

rathagrimes opened this issue · comments

commented

Expected behavior

After rendering the below code, when links 3 or 4 are clicked, query should be "{ bar: 'baz' }"
This is expected based on the documentation stating that "Using hashes to delimit routes is supported out of the box (e.g. /foo#bar)" and there was no mention of caveats :)

Actual behavior

href = "/foo?bar=baz" and query = "{}"

Steps to reproduce behavior

const choo = require('choo');
const html = require('choo/html');

const app = choo();

let view = function(state, emit) {
  return html`
<div class="container">
<ol>
<li><a href="/?bar=baz">/?bar=baz</a></li>
<li><a href="/foo?bar=baz">/foo?bar=baz</a></li>
<li><a href="/#foo?bar=baz">/#foo?bar=baz</a></li>
<li><a href="/index.html#foo?bar=baz">/index.html#foo?bar=baz</a></li>
</ol>
<hr/>

<p>Href:
<blockquote><pre>${state.href}</pre></blockquote>
</p>
<p>Query:
<blockquote><pre>${require('util').inspect(state.query)}</pre></blockquote>
</p>
<p>Route:
<blockquote><pre>${state.route}</pre></blockquote>
</p>
</div>
`;
};

app.route('*', view);

app.mount('div');

with index.html of

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>QSTest</title>
    <style type="text/css">* { font-family: sans-serif; }</style>
  </head>
  <body>
    <div></div>
    <script src="/bundle.js"></script>
  </body>
</html>

and command line like

./node_modules/.bin/budo -p 8000 --live qstest.js:bundle.js

commented

That's actually the expected behavior. Since a query string is a valid fragment identifier, anything that comes after a # is regarded part of the hash. If you'd like to combine query strings and hash navigation you'd put the query before the hash, i.e. /?bar=baz#foo.