☂️ Improve Routing DX

[brillout]

Typesafety

Full URL typesafety.

• Search params typesafety with runtime validation:

  // pages/product/@id/+route.ts
  
  import { z } from 'zod'
  
  const search = z.object({
    page: fallback(z.number(), 1).default(1),
    filter: fallback(z.string(), '').default(''),
    sort: fallback(z.enum(['newest', 'oldest', 'price']), 'newest').default(
      'newest'
    )
  })
  
  export default { search }

  See Tanner deep dive: zod validation.
• Minimal codegen merely "centralizing route types".
  • Import route strings instead of duplicating them?

Guaranteed no 404s. (Except of semantic 404s such as /product/@id param value missing in dabatase.)

Search params serialization

• New library url-serializer for human friendly serialization of search params (instead of using JSON).
• [Breaking change] change type of pageContext.url.search from Record<string, string> to Record<string, unknown>
  • Migration:

    - new URLSearchParams(pageContext.url.search)
    + new URLSearchParams(pageContext.url.searchOriginal)

• [Breaking change] Remove pageContext.url.searchAll (use new URLSearchParams(pageContext.url.searchOriginal) instead)

<Link> & navigate() API

• New component <Link>.
• Align API of <Link> and navigate()

  • {
      // Replaces current URL
      href?: string,
      // All props below modify `href` or current URL (i.e. default value of `href` is the current URL)
      pathname?: string,
      hash?: string | null,
      search?:
        // Modify search params
        | Record<string, unknown>
        | null
        // Set/remove *all* search params
        | ((search: Record<string, unknown>) => Record<string, unknown>)
      locale?: string // New i18n high-level API
    }`

• New high-level i18n API
  • import.meta.env.BASE_LOCALE
• navigate() & <Link> => automatically add Base URL + locale base
• pageContext.url.params instead of pageContext.routeParams?
• New component hook const [search, setSearch] = useSearch() No need: using pageContext.url.search with navigate({ search }) is enough.

Active <Link>

• activeProps
  • Use (isActive: boolean) => Props instead of inactiveProps?
• <Link>{({ isActive }) => <>...</> }</Link>

Related

• Improve navigate() #2197
• Typesafe Links #698
• Single Route File #341
• Built-in <Link> #2180
• High-level i18n API, for easier DX for simple needs #1000