Dynamic & Catch-All Routing

Dynamic Parameters [param]

Folders or files wrapped in single square brackets specify dynamic route parameters.

src/pages/
|-- user/
    |-- [id].jsx           --> /user/:id

Accessing Route Parameters

Dynamic route parameters defined with [param] syntax (such as pages/user/[id].jsx) are passed automatically to your page components.

Select your framework below to see how parameters are received and accessed:

Ziko

src/pages/user/[id].js

import { h1, p, div } from 'ziko'

export default function UserPage({ params }) {
  return div(
    h1('User Profile'),
    p(`Viewing User ID: ${params.id}`)
  )
}

React

src/pages/user/[id].jsx

export default function UserPage({ params }) {
  return (
    <div>
      <h1>User Profile</h1>
      <p>Viewing User ID: <strong>{params.id}</strong></p>
    </div>
  )
}

Solid

src/pages/user/[id].jsx

export default function UserPage(props) {
  return (
    <div>
      <h1>User Profile</h1>
      <p>Viewing User ID: <strong>{props.params.id}</strong></p>
    </div>
  )
}

Preact

src/pages/user/[id].jsx

export default function UserPage({ params }) {
  return (
    <div>
      <h1>User Profile</h1>
      <p>Viewing User ID: <strong>{params.id}</strong></p>
    </div>
  )
}

Vue

src/pages/user/[id].vue

<script setup>
defineProps({
  params: Object
})
</script>

<template>
  <div>
    <h1>User Profile</h1>
    <p>Viewing User ID: <strong>{{ params.id }}</strong></p>
  </div>
</template>

Svelte

src/pages/user/[id].svelte

<script>
  export let params = {};
</script>

<div>
  <h1>User Profile</h1>
  <p>Viewing User ID: <strong>{params.id}</strong></p>
</div>

Van

src/pages/user/[id].js

import van from 'vanjs-core'

const { div, h1, p, strong } = van.tags

export default function UserPage({ params }) {
  return div(
    h1('User Profile'),
    p('Viewing User ID: ', strong(params.id))
  )
}