Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jpcutshall/svelte5-router/llms.txt

Use this file to discover all available pages before exploring further.

svelte5-router supports nesting <Router> components inside one another, which lets you break a large application into self-contained sub-apps with their own route trees. Each nested router inherits the routerBase of its parent so relative paths resolve correctly, and the basepath prop lets you scope an entire sub-tree under a URL prefix — useful when your app is deployed at a path other than the root.

​
Why Nest Routers?

Modular sub-apps

Each feature area (admin panel, user dashboard, docs) can own its router and route list without touching the top-level config.

Sub-path hosting

If your app lives at https://example.com/my-site, set basepath="/my-site" on the root Router and all links and routes resolve correctly.

Seamless context merging

Nested routers read the parent’s routerBase through Svelte context, so they always know their effective base path without any manual wiring.

Independent matching

Each router scores and picks its own best-matching route independently, so inner routers don’t interfere with outer ones.

​
The basepath Prop

Setting basepath on a <Router> prepends that prefix to every <Route path> and <Link to> value that is a descendant of that router. The default value is "/". 
<!-- All routes and links inside this Router are prefixed with /my-site -->
<Router basepath="/my-site">
  <Link to="/about">About</Link>    <!-- resolves to /my-site/about -->
  <Route path="/about" component={About} />
</Router>

​
The routerBase Derived Store

Internally, each Router maintains a routerBase derived store that tracks the currently matched path and URI. When a Router is nested, it reads the routerBase of its parent from Svelte context and uses it as its own base. This means nested routers always stay in sync with their parent’s active route without any extra configuration. You can access this store in your own code using the useRouter context hook: 
<script>
  import { useRouter } from "svelte5-router";

  const { routerBase } = useRouter();
  // $routerBase.path — the current matched path prefix
  // $routerBase.uri  — the current resolved URI prefix
</script>

​
Nesting Routers: Step by Step

1

Create a top-level Router

The root router handles your app’s main routes. Nest sub-apps as route children.
App.svelte
<script>
  import { Router, Link, Route } from "svelte5-router";
  import Home from "./routes/Home.svelte";
  import AdminApp from "./admin/AdminApp.svelte";

  let url = $state("");
</script>

<Router {url}>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/admin">Admin</Link>
  </nav>

  <main>
    <Route path="/" component={Home} />
    <!-- The admin sub-app handles all /admin/* routes -->
    <Route path="/admin/*" component={AdminApp} />
  </main>
</Router>
2

Create the nested Router

Inside AdminApp, declare a second Router with basepath="/admin". Its routes are relative to that base.
admin/AdminApp.svelte
<script>
  import { Router, Link, Route } from "svelte5-router";
  import AdminDashboard from "./AdminDashboard.svelte";
  import AdminUsers from "./AdminUsers.svelte";
  import AdminSettings from "./AdminSettings.svelte";
</script>

<Router basepath="/admin">
  <nav>
    <Link to="/admin">Dashboard</Link>
    <Link to="/admin/users">Users</Link>
    <Link to="/admin/settings">Settings</Link>
  </nav>

  <section>
    <Route path="/admin/users" component={AdminUsers} />
    <Route path="/admin/settings" component={AdminSettings} />
    <!-- Default route for /admin -->
    <Route path="/admin" component={AdminDashboard} />
  </section>
</Router>

​
Complete Example: Parent at /app, Nested at /app/admin

The following example shows a parent router serving /app/* routes and a nested router scoped to /app/admin/*. 
<script>
  import { Router, Link, Route } from "svelte5-router";
  import AppHome from "./routes/AppHome.svelte";
  import AdminArea from "./admin/AdminArea.svelte";

  let url = $state("");
</script>

<Router basepath="/app" {url}>
  <nav>
    <Link to="/app">App Home</Link>
    <Link to="/app/admin">Admin</Link>
  </nav>

  <main>
    <Route path="/app/admin/*" component={AdminArea} />
    <Route path="/app" component={AppHome} />
  </main>
</Router>

​
Hosting at a Sub-Path

If your application is deployed at https://example.com/my-site instead of the root, set basepath on the topmost router:
App.svelte
<script>
  import { Router, Link, Route } from "svelte5-router";
  import Home from "./routes/Home.svelte";
  import About from "./routes/About.svelte";

  let url = $state("");
</script>

<!-- basepath tells the router that all paths start with /my-site -->
<Router basepath="/my-site" {url}>
  <nav>
    <Link to="/my-site">Home</Link>
    <Link to="/my-site/about">About</Link>
  </nav>

  <main>
    <Route path="/my-site/about" component={About} />
    <Route path="/my-site" component={Home} />
  </main>
</Router>
The basepath value is prepended to paths exactly as written. Make sure it matches the path prefix configured in your server or static file host. There is no trailing-slash normalisation, so /my-site and /my-site/ behave differently.

​
Tips

Yes. Each <Route path> value should be the full absolute path including the basepath prefix. The router does not strip the basepath automatically at runtime — it prepends the base to the path you give so they both point to the same URL.
Yes. Routers can be nested to any depth. Each level inherits the routerBase of its parent, so paths always compose correctly as long as you keep them absolute.
Each Router accepts an optional history prop. If you omit it, the nested router uses globalHistory just like the parent. Passing a custom history (e.g. a memory source) lets you isolate the sub-app’s navigation — useful for testing.

Build docs developers (and LLMs) love

Get started for freeTalk to us