fix: fix "Type 'string' is not assignable to type 'undefined'" in loader.navigate / router.preload (#910)

Author: schiller-manuel

examples/react/kitchen-sink/src/main.tsx

@@ -306,20 +306,20 @@ const invoiceRoute = new Route({
 
 function InvoiceComponent() {
   const search = invoiceRoute.useSearch()
-  const navigate = useNavigate()
+  const navigate = useNavigate({ from: invoiceRoute.id })
   const invoice = invoiceRoute.useLoaderData()
   const updateInvoiceMutation = useMutation({
     fn: patchInvoice,
     onSuccess: () => router.invalidate(),
   })
   const [notes, setNotes] = React.useState(search.notes ?? '')
-
   React.useEffect(() => {
     navigate({
       search: (old) => ({
         ...old,
         notes: notes ? notes : undefined,
       }),
+      params: true,
       replace: true,
     })
   }, [notes])
@@ -345,11 +345,14 @@ function InvoiceComponent() {
       />
       <div>
         <Link
+          from={invoiceRoute.id}
+          to={invoiceRoute.to}
           search={(old) => ({
             ...old,
             showNotes: old?.showNotes ? undefined : true,
           })}
           className="text-lime-700"
+          params={true}
         >
           {search.showNotes ? 'Close Notes' : 'Show Notes'}{' '}
         </Link>
@@ -428,7 +431,7 @@ const usersRoute = new Route({
 })
 
 function UsersComponent() {
-  const navigate = useNavigate()
+  const navigate = useNavigate({from: usersRoute.id})
   const { usersView } = usersRoute.useSearch()
   const users = usersRoute.useLoaderData()
   const sortBy = usersView?.sortBy ?? 'name'
@@ -451,6 +454,7 @@ function UsersComponent() {
           },
         }
       },
+      params: true,
       replace: true,
     })
 
@@ -465,6 +469,7 @@ function UsersComponent() {
           },
         }
       },
+      params: true,
       replace: true,
     })
   }, [filterDraft])

packages/react-router/src/RouterProvider.tsx

@@ -41,9 +41,9 @@ export interface MatchLocation {
 
 export type NavigateFn<TRouteTree extends AnyRoute> = <
   TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string | undefined = undefined,
+  TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string | undefined = undefined,
+  TMaskTo extends string = '',
 >(
   opts: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
 ) => Promise<void>

packages/react-router/src/link.tsx

@@ -118,9 +118,9 @@ export type RelativeToPathAutoComplete<
 export type NavigateOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string | undefined = undefined,
+  TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string | undefined = undefined,
+  TMaskTo extends string = '',
 > = ToOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & {
   // `replace` is a boolean that determines whether the navigation should replace the current history entry or push a new one.
   replace?: boolean
@@ -132,25 +132,25 @@ export type NavigateOptions<
 export type ToOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string | undefined = undefined,
+  TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string | undefined = undefined,
+  TMaskTo extends string = '',
 > = ToSubOptions<TRouteTree, TFrom, TTo> & {
   mask?: ToMaskOptions<TRouteTree, TMaskFrom, TMaskTo>
 }
 
 export type ToMaskOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TMaskFrom extends RoutePaths<TRouteTree> | string = string,
-  TMaskTo extends string | undefined = undefined,
+  TMaskTo extends string = '',
 > = ToSubOptions<TRouteTree, TMaskFrom, TMaskTo> & {
   unmaskOnReload?: boolean
 }
 
 export type ToSubOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string | undefined = undefined,
+  TTo extends string = '',
   TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>,
 > = {
   to?: ToPathOption<TRouteTree, TFrom, TTo>
@@ -174,7 +174,7 @@ export type ParamOptions<
   TResolved,
   TParamVariant extends 'allParams' | 'fullSearchSchema',
   TFromParams = Expand<RouteByPath<TRouteTree, TFrom>['types'][TParamVariant]>,
-  TToParams = TTo extends undefined
+  TToParams = TTo extends ''
     ? TFromParams
     : never extends TResolved
       ? Expand<RouteByPath<TRouteTree, TTo>['types'][TParamVariant]>
@@ -212,7 +212,7 @@ export type PathParamOptions<
 export type ToPathOption<
   TRouteTree extends AnyRoute = AnyRoute,
   TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string | undefined = undefined,
+  TTo extends string = '',
 > =
   | TTo
   | RelativeToPathAutoComplete<
@@ -224,7 +224,7 @@ export type ToPathOption<
 export type ToIdOption<
   TRouteTree extends AnyRoute = AnyRoute,
   TFrom extends RoutePaths<TRouteTree> | undefined = undefined,
-  TTo extends string | undefined = undefined,
+  TTo extends string = '',
 > =
   | TTo
   | RelativeToPathAutoComplete<
@@ -242,9 +242,9 @@ export interface ActiveOptions {
 export type LinkOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string | undefined = undefined,
+  TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string | undefined = undefined,
+  TMaskTo extends string = '',
 > = NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & {
   // The standard anchor tag target attribute
   target?: HTMLAnchorElement['target']
@@ -334,9 +334,9 @@ const preloadWarning = 'Error preloading route! ☝️'
 export function useLinkProps<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string | undefined = undefined,
+  TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string | undefined = undefined,
+  TMaskTo extends string = '',
 >(
   options: UseLinkPropsOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
 ): React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -553,9 +553,9 @@ export interface LinkComponent<TProps extends Record<string, any> = {}> {
   <
     TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
     TFrom extends RoutePaths<TRouteTree> | string = string,
-    TTo extends string | undefined = undefined,
+    TTo extends string = '',
     TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-    TMaskTo extends string | undefined = undefined,
+    TMaskTo extends string = '',
   >(
     props: LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
       TProps &

packages/react-router/src/useNavigate.tsx

@@ -20,9 +20,9 @@ export function useNavigate<
   return React.useCallback(
     <
       TFrom extends RoutePaths<TRouteTree> | string = TDefaultFrom,
-      TTo extends string | undefined = undefined,
+      TTo extends string = '',
       TMaskFrom extends RoutePaths<TRouteTree>| string = TFrom,
-      TMaskTo extends string | undefined = undefined,
+      TMaskTo extends string = '',
     >({
       from,
       ...rest
@@ -54,9 +54,9 @@ export function useNavigate<
 export function Navigate<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string | undefined = undefined,
+  TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string | undefined = undefined,
+  TMaskTo extends string = '',
 >(props: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>): null {
   const { navigate } = useRouter()
   const match = useMatch({ strict: false })
@@ -74,18 +74,18 @@ export function Navigate<
 export type UseLinkPropsOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string | undefined= undefined,
+  TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string | undefined = undefined,
+  TMaskTo extends string = '',
 > = ActiveLinkOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
   React.AnchorHTMLAttributes<HTMLAnchorElement>
 
 export type LinkProps<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string| undefined = undefined,
+  TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string | undefined = undefined,
+  TMaskTo extends string = '',
 > = ActiveLinkOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
   Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
     // 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
@@ -97,9 +97,9 @@ export type LinkProps<
 export type ActiveLinkOptions<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string | undefined = undefined,
+  TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string | undefined = undefined,
+  TMaskTo extends string = '',
 > = LinkOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & {
   // A function that returns additional props for the `active` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
   activeProps?: