API reference > @kontsedal/olas-router > createRouterAdapter

createRouterAdapter() function

Build a router adapter — a paired { plugin, Bridge }.

Wire-up:

import { createRouterAdapter, RouteParamsScope } from '@kontsedal/olas-router'

const adapter = createRouterAdapter()
const root = createRoot(appController, { deps, plugins: [adapter.plugin] })

function App() {
  // TanStack Router:
  const params = useParams({ strict: false })
  const search = useSearch({ strict: false })
  const location = useLocation()

  // React Router v6:
  // const params = useParams()
  // const [sp] = useSearchParams()
  // const { pathname } = useLocation()

  return (
    <OlasProvider root={root}>
      <adapter.Bridge params={params} search={search} pathname={location.pathname}>
        <YourRoutes />
      </adapter.Bridge>
    </OlasProvider>
  )
}

In any controller:

const params = ctx.inject(RouteParamsScope)
const userId = computed(() => params.value.userId)

The adapter is router-agnostic by design — wire whatever client-side router you use. Next.js's app router is not supported: its server components run outside the browser tree a controller lives in.

**SSR:** pass initial so the scopes hold real route state during the server render — the Bridge pushes state in a client-only effect, so without seeding, params / search / pathname are empty ({} / '') for the whole server render. Derive initial from the request URL:

const adapter = createRouterAdapter({
  params: matchedRouteParams,        // from your server router match
  search: parsedSearch,
  pathname: url.pathname,
})

Signature:

export declare function createRouterAdapter(initial?: RouteState): RouterAdapter;

Parameters

Parameter	Type	Description
initial	RouteState	(Optional)

Returns:

RouterAdapter