8000 [labs/router] Hash routing doesn't work · Issue #3517 · lit/lit · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
[labs/router] Hash routing doesn't work #3517
@FluorescentHallucinogen

Description

Which package(s) are affected?

@lit-labs/router

Description

The pathname for URLPattern works in @lit-labs/router, but the hash for some reason doesn't. See the reproduction below.

This is not a bug in the native browser implementation of URLPattern or in the urlpattern-polyfill:

new URLPattern({ hash: "one" }).test("http://localhost:8080")
// returns `false`

new URLPattern({ hash: "one" }).test("http://localhost:8080/#one")
// returns `true`

new URLPattern({ hash: "one" }).test("http://localhost:8080#one")
// returns `true`

new URLPattern({ hash: "one" }).test("http://localhost:8080/something/#one")
// returns `true`

In the @lit-labs/router source code I've found this: https://github.com/lit/lit/blob/main/packages/labs/router/src/routes.ts#L32.

Does this mean that nothing except pathname and search including hash is implemented?

Reproduction

Here's a playground (based on "Hello World" sample): link.

import { html, LitElement } from "lit";
import { customElement } from "lit/decorators.js";
import { Router } from "@lit-labs/router";
import "urlpattern-polyfill";

@customElement("simple-greeting")
export class SimpleGreeting extends LitElement {
  private _router = new Router(this, [
    {
      pattern: new URLPattern({ pathname: "/" }),
      render: () => html`<p>We are at /</p>`,
    },
    {
      pattern: new URLPattern({ pathname: "/1" }),
      render: () => html`<p>We are at /1</p>`,
    },
    {
      pattern: new URLPattern({ pathname: "/2" }),
      render: () => html`<p>We are at /2</p>`,
    },
    {
      pattern: new URLPattern({ hash: "one" }),
      render: () => html`<p>We are at #one</p>`,
    },
    {
      pattern: new URLPattern({ hash: "two" }),
      render: () => html`<p>We are at #two</p>`,
    },
    {
      pattern: new URLPattern({ hash: "three" }),
      render: () => html`<p>We are at #three</p>`,
    },
  ]);

  render() {
    return html`
        <p><a href="/">Go to /</a>
        <p><a href="/1">Go to /1</a></p>
        <p><a href="/2">Go to /2</a></p>
        <p><a href="#one">Go to #one</a></p>
        <p><a href="#two">Go to #two</a></p>
        <p><a href="#three">Go to #three</a></p>
        <p>Result: ${this._router.outlet()}</p>
    </p>`;
  }
}

Workaround

I have not found a workaround.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

@lit-labs/router@0.1.1

Browser/OS/Node environment

Browser: Google Chrome 110.0.5475.0.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

Status

📋 Triaged

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

    0