Navigation

Type-safe hrefs

For the DOM based routing, we've prepared a href function that lists all the possible route URLs of your application.

<script lang="ts">
  import { href as h } from '$oxide'
</script>

<a href={h`/foo/bar`}>Navigate to Bar</a>

Programmatic navigation

If you'd like to navigate user programmatically, we've prepared a useRouter context consumer that lets you access router method directly.

<script lang="ts">
  import { useRouter } from '$oxide'

  const router = useRouter()

  function navigateHome() {
    router.push("/")
  }
</script>

<button onclick={navigateHome}>Go Home</button>