#558·wouter

Links using ~ do not respect `base`

Author: chielCreated Feb 9, 2026Updated Mar 30, 2026

Example:

typescript
import { Router, Route, Link } from "wouter";

function ScheduleOverview() {
  return (
    <div>
      <h1>Schedule Overview</h1>
      <Link href="/2026-02-11">Go to Feb 11</Link>
    </div>
  );
}

function ScheduleDetail({ date }) {
  return (
    <div>
      <h1>Schedule for {date}</h1>
      {/* Expected: navigates to /app/schedule */}
      {/* Actual: navigates to /schedule (missing /app base) */}
      <Link href="~/schedule">Back to Overview</Link>
    </div>
  );
}

function App() {
  return (
    <Router base="/app">
      <Route path="/schedule" nest>
        <Route path="/">
          <ScheduleOverview />
        </Route>
        <Route path="/:date">
          {({ date }) => <ScheduleDetail date={date} />}
        </Route>
      </Route>
    </Router>
  );
}
  1. Navigate to /app/schedule/2026-02-11
  2. Click "Back to Overview" link
  3. Expected: navigates to /app/schedule
  4. Actual: navigates to /schedule (base path /app is not applied)

I understand from the docs (under Router) that the ~ is an escape hatch to navigate to an absolute path since /-prefixed urls are relative to the parent route, but is there a way to route relative to the base?