@tanstack/react-router 0.0.1-beta.67 → 0.0.1-beta.69

package/src/index.tsx

@@ -30,6 +30,8 @@ import {
   AnySearchSchema,
   AnyPathParams,
   AnyRouteMatch,
+  NavigateOptions,
+  RouterConstructorOptions,
 } from '@tanstack/router'
 import { useStore } from '@tanstack/react-store'
 
@@ -68,7 +70,7 @@ export function lazy(
 
 export type LinkPropsOptions<
   TFrom extends RegisteredRoutesInfo['routePaths'] = '/',
-  TTo extends string = '.',
+  TTo extends string = '',
 > = LinkOptions<RegisteredRoutesInfo, TFrom, TTo> & {
   // 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?:
@@ -82,12 +84,12 @@ export type LinkPropsOptions<
 
 export type MakeUseMatchRouteOptions<
   TFrom extends RegisteredRoutesInfo['routePaths'] = '/',
-  TTo extends string = '.',
+  TTo extends string = '',
 > = ToOptions<RegisteredRoutesInfo, TFrom, TTo> & MatchRouteOptions
 
 export type MakeMatchRouteOptions<
   TFrom extends RegisteredRoutesInfo['routePaths'] = '/',
-  TTo extends string = '.',
+  TTo extends string = '',
 > = ToOptions<RegisteredRoutesInfo, TFrom, TTo> &
   MatchRouteOptions & {
     // 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
@@ -103,12 +105,12 @@ export type MakeMatchRouteOptions<
 
 export type MakeLinkPropsOptions<
   TFrom extends ValidFromPath<RegisteredRoutesInfo> = '/',
-  TTo extends string = '.',
+  TTo extends string = '',
 > = LinkPropsOptions<TFrom, TTo> & React.AnchorHTMLAttributes<HTMLAnchorElement>
 
 export type MakeLinkOptions<
   TFrom extends RegisteredRoutesInfo['routePaths'] = '/',
-  TTo extends string = '.',
+  TTo extends string = '',
 > = LinkPropsOptions<TFrom, TTo> &
   React.AnchorHTMLAttributes<HTMLAnchorElement> &
   Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
@@ -144,7 +146,7 @@ export type PromptProps = {
 
 export function useLinkProps<
   TFrom extends ValidFromPath<RegisteredRoutesInfo> = '/',
-  TTo extends string = '.',
+  TTo extends string = '',
 >(
   options: MakeLinkPropsOptions<TFrom, TTo>,
 ): React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -175,7 +177,6 @@ export function useLinkProps<
     onMouseEnter,
     onMouseLeave,
     onTouchStart,
-    onTouchEnd,
     ...rest
   } = options
 
@@ -186,8 +187,15 @@ export function useLinkProps<
     return { href }
   }
 
-  const { handleClick, handleFocus, handleEnter, handleLeave, isActive, next } =
-    linkInfo
+  const {
+    handleClick,
+    handleFocus,
+    handleEnter,
+    handleLeave,
+    handleTouchStart,
+    isActive,
+    next,
+  } = linkInfo
 
   const reactHandleClick = (e: Event) => {
     if (React.startTransition) {
@@ -228,6 +236,7 @@ export function useLinkProps<
     onFocus: composeHandlers([onFocus, handleFocus]),
     onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
     onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+    onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
     target,
     style: {
       ...style,
@@ -254,7 +263,7 @@ export function useLinkProps<
 
 export interface LinkFn<
   TDefaultFrom extends RegisteredRoutesInfo['routePaths'] = '/',
-  TDefaultTo extends string = '.',
+  TDefaultTo extends string = '',
 > {
   <
     TFrom extends RegisteredRoutesInfo['routePaths'] = TDefaultFrom,
@@ -283,6 +292,19 @@ export const Link: LinkFn = React.forwardRef((props: any, ref) => {
   )
 }) as any
 
+export function Navigate<
+  TFrom extends RegisteredRoutesInfo['routePaths'] = '/',
+  TTo extends string = '',
+>(props: NavigateOptions<RegisteredRoutesInfo, TFrom, TTo>): null {
+  const router = useRouterContext()
+
+  React.useLayoutEffect(() => {
+    router.navigate(props as any)
+  }, [])
+
+  return null
+}
+
 type MatchesContextValue = AnyRouteMatch[]
 
 export const matchesContext = React.createContext<MatchesContextValue>(null!)
@@ -299,7 +321,7 @@ export class ReactRouter<
   TRouteConfig extends AnyRootRoute = RootRoute,
   TRoutesInfo extends AnyRoutesInfo = RoutesInfo<TRouteConfig>,
 > extends Router<TRouteConfig, TRoutesInfo> {
-  constructor(opts: RouterOptions<TRouteConfig>) {
+  constructor(opts: RouterConstructorOptions<TRouteConfig>) {
     super({
       ...opts,
       loadComponent: async (component) => {
@@ -423,7 +445,7 @@ export function useRoute<
     resolvedRoute,
     `Could not find a route for route "${
       routeId as string
-    }"! Did you forget to add it to your route config?`,
+    }"! Did you forget to add it to your route?`,
   )
 
   return resolvedRoute as any
@@ -475,37 +497,43 @@ export function useNavigate<
   TDefaultFrom extends keyof RegisteredRoutesInfo['routesById'] = '/',
 >(defaultOpts?: { from?: TDefaultFrom }) {
   const router = useRouterContext()
-  return <
-    TFrom extends keyof RegisteredRoutesInfo['routesById'] = TDefaultFrom,
-    TTo extends string = '.',
-  >(
-    opts?: MakeLinkOptions<TFrom, TTo>,
-  ) => {
-    return router.navigate({ ...defaultOpts, ...(opts as any) })
-  }
+  return React.useCallback(
+    <
+      TFrom extends keyof RegisteredRoutesInfo['routesById'] = TDefaultFrom,
+      TTo extends string = '',
+    >(
+      opts?: MakeLinkOptions<TFrom, TTo>,
+    ) => {
+      return router.navigate({ ...defaultOpts, ...(opts as any) })
+    },
+    [],
+  )
 }
 
 export function useMatchRoute() {
   const router = useRouterContext()
 
-  return <
-    TFrom extends ValidFromPath<RegisteredRoutesInfo> = '/',
-    TTo extends string = '.',
-  >(
-    opts: MakeUseMatchRouteOptions<TFrom, TTo>,
-  ) => {
-    const { pending, caseSensitive, ...rest } = opts
-
-    return router.matchRoute(rest as any, {
-      pending,
-      caseSensitive,
-    })
-  }
+  return React.useCallback(
+    <
+      TFrom extends ValidFromPath<RegisteredRoutesInfo> = '/',
+      TTo extends string = '',
+    >(
+      opts: MakeUseMatchRouteOptions<TFrom, TTo>,
+    ) => {
+      const { pending, caseSensitive, ...rest } = opts
+
+      return router.matchRoute(rest as any, {
+        pending,
+        caseSensitive,
+      })
+    },
+    [],
+  )
 }
 
 export function MatchRoute<
   TFrom extends ValidFromPath<RegisteredRoutesInfo> = '/',
-  TTo extends string = '.',
+  TTo extends string = '',
 >(props: MakeMatchRouteOptions<TFrom, TTo>): any {
   const matchRoute = useMatchRoute()
   const params = matchRoute(props)