Skip to content
QuickGUI

Router

A QuickGUI UI projection of QuickGUI core routing with nested layouts and bounded memory history.

Loading interactive demo…

#Import

Import Router from @quickgui/solid.

import { Router } from "@quickgui/solid";

#Usage

<Router initialPath="/">
  <Route path="/" component={Shell}>
    <Route path="/" component={Home} />
    <Route path="/projects/:id" component={Project} />
  </Route>
</Router>

#Anatomy

  • Router
  • Route
  • Link
  • Outlet
<Router>
  <Route path="/" component={AppShell}>
    <Route path="/projects/:id" component={Project} />
  </Route>
  <Link href="/projects/quickgui">Open project</Link>
  <Outlet />
</Router>

#API reference

Expand an entry for its description and complete signature. A dash means no declaration default is documented.

Router

View source
Router(props: RouterProps): JSX.Element
initialPathstring—

Initial memory-history destination. Defaults to `/`.

string
View source
fallbackJSX.Element—

Rendered when no declared route matches.

JSX.Element
View source
childrenJSX.Element—

Declares children (optional). Reactive JSX expressions update this property in place.

JSX.Element
View source