Skip to content

TonicRouter seems to have issues working with hash fragments #125

@keks

Description

@keks

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>';

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions