Links missing a leading slash trigger a page reload

[Joel Lefkowitz]

Links of the form <Link href="path" /> rather than <Link href="/path" /> that are missing the leading slash are routed but trigger a page reload. It's an easy mistake to make since the routing occurs as expected and a difficult problem to diagnose.

Possible solutions:

• Don't allow routes missing the leading slash
• Don't trigger the reload
• Mention it in the readme

Example:

import Router, { Link } from "preact-router";
import { VNode, render } from "preact";

const Home = (): VNode => (
  <>
    <Link href="/about">/about</Link>
    <br />
    <Link href="about">about (matches but reloads)</Link>
  </>
);

const About = (): VNode => <Link href="/home">/home</Link>

render(
  <Router>
    <Home default path="/" />
    <About path="/about" />
  </Router>,
  document.getElementById("root") as HTMLDivElement
);