typescripttanstack-router

How to use the common Route type?

import type {Route} from "@tanstack/react-router";
import {Route as MeRoute} from '@/app/(start)/me/index.tsx'
import {Route as MessageRoute} from '@/app/(start)/message/index.tsx'

interface Item {
  label: string
  route: Route
}

const items: Item[] = [
  {
    label: "me",
    route: MeRoute
  },
  {
    label: "message",
    route: MessageRoute
  }
]

erorr message:

Types of property isRoot are incompatible.
Type false is not assignable to type true
Test. tsx(14, 3): The expected type comes from property route which is declared here on type Item

error

This doesn't seem to be the correct usage. I want to use the imported Route in other files to get the path. How should I do it?

Solution

  • What you're looking for is AnyRoute

    import type {AnyRoute} from "@tanstack/react-router";

interface Item {
  label: string
  route: AnyRoute
}