RouteApi Type

The RouteApi describes an instance that provides type-safe versions of common hooks like useParams, useSearch, useRouteContext, useNavigate, useLoaderData, and useLoaderDeps that are pre-bound to a specific route ID and corresponding registered route types.

The RouteApi has the following properties and methods:

  useMatch<TSelected = TAllContext>(opts?: {
    select?: (match: TAllContext) => TSelected
  }): TSelected

  useMatch<TSelected = TAllContext>(opts?: {
    select?: (match: TAllContext) => TSelected
  }): TSelected

• A type-safe version of the useMatch hook that is pre-bound to the route ID that the RouteApi instance was created with.
• Options
  • opts.select
    • Optional
    • (match: RouteMatch) => TSelected
    • If supplied, this function will be called with the route match and the return value will be returned from useMatch. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
  • opts.structuralSharing
    • Optional
    • boolean
    • Configures whether structural sharing is enabled for the value returned by select.
    • See the Render Optimizations guide for more information.
• Returns
  • If a select function is provided, the return value of the select function.
  • If no select function is provided, the RouteMatch object or a loosened version of the RouteMatch object if opts.strict is false.

  useRouteContext<TSelected = TAllContext>(opts?: {
    select?: (search: TAllContext) => TSelected
  }): TSelected

  useRouteContext<TSelected = TAllContext>(opts?: {
    select?: (search: TAllContext) => TSelected
  }): TSelected

• A type-safe version of the useRouteContext hook that is pre-bound to the route ID that the RouteApi instance was created with.
• Options
  • opts.select
    • Optional
    • (match: RouteContext) => TSelected
    • If supplied, this function will be called with the route match and the return value will be returned from useRouteContext. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
• Returns
  • If a select function is provided, the return value of the select function.
  • If no select function is provided, the RouteContext object or a loosened version of the RouteContext object if opts.strict is false.

  useSearch<TSelected = TFullSearchSchema>(opts?: {
    select?: (search: TFullSearchSchema) => TSelected
  }): TSelected

  useSearch<TSelected = TFullSearchSchema>(opts?: {
    select?: (search: TFullSearchSchema) => TSelected
  }): TSelected

• A type-safe version of the useSearch hook that is pre-bound to the route ID that the RouteApi instance was created with.
• Options
  • opts.select
    • Optional
    • (match: TFullSearchSchema) => TSelected
    • If supplied, this function will be called with the route match and the return value will be returned from useSearch. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
  • opts.structuralSharing
    • Optional
    • boolean
    • Configures whether structural sharing is enabled for the value returned by select.
    • See the Render Optimizations guide for more information.
• Returns
  • If a select function is provided, the return value of the select function.
  • If no select function is provided, the TFullSearchSchema object or a loosened version of the TFullSearchSchema object if opts.strict is false.

  useParams<TSelected = TAllParams>(opts?: {
    select?: (params: TAllParams) => TSelected
  }): TSelected

  useParams<TSelected = TAllParams>(opts?: {
    select?: (params: TAllParams) => TSelected
  }): TSelected

• A type-safe version of the useParams hook that is pre-bound to the route ID that the RouteApi instance was created with.
• Options
  • opts.select
    • Optional
    • (match: TAllParams) => TSelected
    • If supplied, this function will be called with the route match and the return value will be returned from useParams. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
  • opts.structuralSharing
    • Optional
    • boolean
    • Configures whether structural sharing is enabled for the value returned by select.
    • See the Render Optimizations guide for more information.
• Returns
  • If a select function is provided, the return value of the select function.
  • If no select function is provided, the TAllParams object or a loosened version of the TAllParams object if opts.strict is false.

  useLoaderData<TSelected = TLoaderData>(opts?: {
    select?: (search: TLoaderData) => TSelected
  }): TSelected

  useLoaderData<TSelected = TLoaderData>(opts?: {
    select?: (search: TLoaderData) => TSelected
  }): TSelected

• A type-safe version of the useLoaderData hook that is pre-bound to the route ID that the RouteApi instance was created with.
• Options
  • opts.select
    • Optional
    • (match: TLoaderData) => TSelected
    • If supplied, this function will be called with the route match and the return value will be returned from useLoaderData. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.
  • opts.structuralSharing
    • Optional
    • boolean
    • Configures whether structural sharing is enabled for the value returned by select.
    • See the Render Optimizations guide for more information.
• Returns
  • If a select function is provided, the return value of the select function.
  • If no select function is provided, the TLoaderData object or a loosened version of the TLoaderData object if opts.strict is false.

  useLoaderDeps<TSelected = TLoaderDeps>(opts?: {
    select?: (search: TLoaderDeps) => TSelected
  }): TSelected

  useLoaderDeps<TSelected = TLoaderDeps>(opts?: {
    select?: (search: TLoaderDeps) => TSelected
  }): TSelected

• A type-safe version of the useLoaderDeps hook that is pre-bound to the route ID that the RouteApi instance was created with.
• Options
  • opts.select
    • Optional
    • (match: TLoaderDeps) => TSelected
    • If supplied, this function will be called with the route match and the return value will be returned from useLoaderDeps.
  • opts.structuralSharing
    • Optional
    • boolean
    • Configures whether structural sharing is enabled for the value returned by select.
    • See the Render Optimizations guide for more information.
• Returns
  • If a select function is provided, the return value of the select function.
  • If no select function is provided, the TLoaderDeps object.

  useNavigate(): // navigate function

  useNavigate(): // navigate function

• A type-safe version of useNavigate that is pre-bound to the route ID that the RouteApi instance was created with.