components
components copied to clipboard
TonicRouter seems to have issues working with hash fragments
I want to host my Tonic app using static file hosting, so I can't have users request paths that don't really exist (actually I am experimenting with web extensions, so it's not really hosted at all). That's why I keep my application paths inside the hash fragment of the URL. I can't get TonicRouter to match these, though.
Initially I only got a blank page (so not even the none
router matched), but I managed to resolve that using the pushState
-hack. but still, I am not able to get it to match the itworks-router.
Is this intended?
import Tonic from '@socketsupply/tonic';
import {TonicRouter} from '@socketsupply/components/router';
class MWE extends Tonic {
connected () {
window.history.pushState({},"", window.location); // HACK
this.addEventListener('match', this.reRender);
}
render () {
return this.html`
<tonic-router id="itworks-router" path="/#/itworks">
it works
</tonic-router>
<tonic-router id="notfound-router" none>
it at least sort of works
</tonic-router>
`;
}
}
Tonic.add(TonicRouter);
Tonic.add(MWE);
document.body.innerHTML = '<m-w-e id="container"></m-w-e>';