Routes & Params

Static routes

<Route path="/"        component={Home} />
<Route path="/about"   component={About} />
<Route path="/contact" component={Contact} />

Dynamic params

Use :paramName syntax:

<Route path="/users/:id"           component={UserDetail} />
<Route path="/posts/:slug/comments" component={PostComments} />

Access params in the component via useParams:

import { useParams } from '@weldjs/router'

function UserDetail() {
  const { id } = useParams<{ id: string }>()
  const { data } = useWeld(api.get(`users/${id}`, UserSchema))
  // ...
}

Or as direct props when using the component prop:

function UserDetail({ id }: { id: string }) {
  // id is injected from the URL
}

Inline children

<Route path="/dashboard">
  <Weld.Main>
    <Dashboard />
  </Weld.Main>
</Route>