Skip to content
QuickGUI

Routing

Declare routes, render the match in the current window, and navigate with links or useNavigate.

#Routes

import { Router, Route, Link } from "@quickgui/solid/router";

<Router initialPath="/">
  <Route path="/" component={() => <Link href="/settings">Settings</Link>} />
  <Route path="/settings" component={() => <Text>Settings</Text>} />
  <Route path="/projects/:id" component={Project} />
</Router>

#Nested layouts

Nested routes are relative to their parent. Render <Outlet /> where the next matched route belongs. A pathless route can provide a shared layout without adding a URL segment.

<Route path="/" component={Shell}>
  <Route path="/" component={Home} />
  <Route path="/settings" component={Settings} />
</Route>

function Shell() {
  return (
    <View style={{ flexCol: true, gap: 12 }}>
      <Link href="/">Home</Link>
      <Link href="/settings">Settings</Link>
      <Outlet />
    </View>
  );
}
const navigate = useNavigate();
<Button onClick={() => navigate("/projects/42")}>Open project</Button>
<Link href="/">Home</Link>

The router supports push, replace, back, and forward. Navigation stays inside the app.

#Route parameters

function Project() {
  const params = useParams();
  return <Text>Project {params.id}</Text>;
}

useLocation() and useSearchParams() also return reactive objects. Read location.pathname and searchParams.tab in JSX so the text stays current.