feat: trailingSlashes option on the type level

packages/react-router/src/Matches.tsx

@@ -428,37 +428,39 @@ export interface MatchRouteOptions {
 }
 
 export type UseMatchRouteOptions<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> = RoutePaths<TRouteTree>,
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends RoutePaths<TRouter['routeTree']> = RoutePaths<
+    TRouter['routeTree']
+  >,
   TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
+  TMaskFrom extends RoutePaths<TRouter['routeTree']> = TFrom,
   TMaskTo extends string = '',
   TOptions extends ToOptions<
-    TRouteTree,
+    TRouter,
     TFrom,
     TTo,
     TMaskFrom,
     TMaskTo
-  > = ToOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+  > = ToOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
   TRelaxedOptions = Omit<TOptions, 'search' | 'params'> &
     DeepPartial<Pick<TOptions, 'search' | 'params'>>,
 > = TRelaxedOptions & MatchRouteOptions
 
-export function useMatchRoute<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
->() {
+export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
   const router = useRouter()
 
   return React.useCallback(
     <
-      TFrom extends RoutePaths<TRouteTree> = RoutePaths<TRouteTree>,
+      TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
       TTo extends string = '',
-      TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
+      TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
       TMaskTo extends string = '',
       TResolved extends string = ResolveRelativePath<TFrom, NoInfer<TTo>>,
     >(
-      opts: UseMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
-    ): false | RouteById<TRouteTree, TResolved>['types']['allParams'] => {
+      opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
+    ):
+      | false
+      | RouteById<TRouter['routeTree'], TResolved>['types']['allParams'] => {
       const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts
 
       return router.matchRoute(rest as any, {
@@ -473,31 +475,47 @@ export function useMatchRoute<
 }
 
 export type MakeMatchRouteOptions<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> = RoutePaths<TRouteTree>,
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends RoutePaths<TRouter['routeTree']> = RoutePaths<
+    TRouter['routeTree']
+  >,
   TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
+  TMaskFrom extends RoutePaths<TRouter['routeTree']> = TFrom,
   TMaskTo extends string = '',
-> = UseMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & {
+> = UseMatchRouteOptions<
+  TRouter['routeTree'],
+  TFrom,
+  TTo,
+  TMaskFrom,
+  TMaskTo
+> & {
   // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
   children?:
     | ((
         params?: RouteByPath<
-          TRouteTree,
+          TRouter['routeTree'],
           ResolveRelativePath<TFrom, NoInfer<TTo>>
         >['types']['allParams'],
       ) => ReactNode)
     | React.ReactNode
 }
 
 export function MatchRoute<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> = RoutePaths<TRouteTree>,
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends RoutePaths<TRouter['routeTree']> = RoutePaths<
+    TRouter['routeTree']
+  >,
   TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
+  TMaskFrom extends RoutePaths<TRouter['routeTree']> = TFrom,
   TMaskTo extends string = '',
 >(
-  props: MakeMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+  props: MakeMatchRouteOptions<
+    TRouter['routeTree'],
+    TFrom,
+    TTo,
+    TMaskFrom,
+    TMaskTo
+  >,
 ): any {
   const matchRoute = useMatchRoute()
   const params = matchRoute(props as any)

packages/react-router/src/RouterProvider.tsx

@@ -10,6 +10,7 @@ import type { ParsedLocation } from './location'
 import type { AnyRoute } from './route'
 import type { RoutePaths } from './routeInfo'
 import type {
+  AnyRouter,
   RegisteredRouter,
   Router,
   RouterOptions,
@@ -37,12 +38,12 @@ export interface MatchLocation {
 
 export type NavigateFn = <
   TTo extends string,
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> | string = string,
-  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
+  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
   TMaskTo extends string = '',
 >(
-  opts: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+  opts: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
 ) => Promise<void>
 
 export type BuildLocationFn<TRouteTree extends AnyRoute> = <
@@ -51,17 +52,23 @@ export type BuildLocationFn<TRouteTree extends AnyRoute> = <
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
   TMaskTo extends string = '',
 >(
-  opts: ToOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & {
+  opts: ToOptions<
+    Router<TRouteTree, 'never'>,
+    TFrom,
+    TTo,
+    TMaskFrom,
+    TMaskTo
+  > & {
     leaveParams?: boolean
   },
 ) => ParsedLocation
 
 export type InjectedHtmlEntry = string | (() => Promise<string> | string)
 
 export function RouterProvider<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TRouter extends AnyRouter = RegisteredRouter,
   TDehydrated extends Record<string, any> = Record<string, any>,
->({ router, ...rest }: RouterProps<TRouteTree, TDehydrated>) {
+>({ router, ...rest }: RouterProps<TRouter, TDehydrated>) {
   // Allow the router to update options on the router instance
   router.update({
     ...router.options,
@@ -238,11 +245,27 @@ export function getRouteMatch<TRouteTree extends AnyRoute>(
 }
 
 export type RouterProps<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TRouter extends AnyRouter = RegisteredRouter,
   TDehydrated extends Record<string, any> = Record<string, any>,
-> = Omit<RouterOptions<TRouteTree, TDehydrated>, 'context'> & {
-  router: Router<TRouteTree>
-  context?: Partial<RouterOptions<TRouteTree, TDehydrated>['context']>
+> = Omit<
+  RouterOptions<
+    TRouter['routeTree'],
+    NonNullable<TRouter['options']['trailingSlash']>,
+    TDehydrated
+  >,
+  'context'
+> & {
+  router: Router<
+    TRouter['routeTree'],
+    NonNullable<TRouter['options']['trailingSlash']>
+  >
+  context?: Partial<
+    RouterOptions<
+      TRouter['routeTree'],
+      NonNullable<TRouter['options']['trailingSlash']>,
+      TDehydrated
+    >['context']
+  >
 }
 
 function usePrevious<T>(value: T) {