feat: type safe useSetSearch

examples/react/basic-default-search-params/src/main.tsx

@@ -172,12 +172,18 @@ function PostErrorComponent({ error }: ErrorRouteProps) {
 
 function PostComponent() {
   const post = postRoute.useLoaderData()
-  const { color } = postRoute.useSearch()
+  const { color, postId } = postRoute.useSearch()
+  const setSearch = postRoute.useSetSearch({ replace: false })
+
   return (
     <div className="space-y-2">
       <h4 className="text-xl font-bold">{post.title}</h4>
       <hr className="opacity-20" />
       <div className={`text-sm  text-${color}-300`}>{post.body}</div>
+
+      <button onClick={() => setSearch({ postId: postId + 1 })}>
+        Next Page
+      </button>
     </div>
   )
 }

packages/react-router/src/index.tsx

@@ -26,4 +26,5 @@ export * from './useBlocker'
 export * from './useNavigate'
 export * from './useParams'
 export * from './useSearch'
+export * from './useSetSearch'
 export * from './utils'

packages/react-router/src/route.ts

@@ -9,6 +9,7 @@ import { RouteById, RouteIds, RoutePaths } from './routeInfo'
 import { AnyRouter, RegisteredRouter } from './router'
 import { useParams } from './useParams'
 import { useSearch } from './useSearch'
+import { useSetSearch } from './useSetSearch'
 import {
   Assign,
   Expand,
@@ -504,6 +505,12 @@ export class RouteApi<
     return useSearch({ ...opts, from: this.id } as any)
   }
 
+  useSetSearch = <TSelected = TFullSearchSchema>(opts?: {
+    replace?: boolean
+  }): ((search: Partial<TSelected>) => void) => {
+    return useSetSearch({ ...opts, from: this.id } as any) as any
+  }
+
   useParams = <TSelected = TAllParams>(opts?: {
     select?: (s: TAllParams) => TSelected
   }): TSelected => {
@@ -829,6 +836,12 @@ export class Route<
     return useSearch({ ...opts, from: this.id } as any)
   }
 
+  useSetSearch = <TSelected = TFullSearchSchema>(opts?: {
+    replace?: boolean
+  }): ((search: Partial<TSelected>) => void) => {
+    return useSetSearch({ ...opts, from: this.id } as any) as any
+  }
+
   useParams = <TSelected = TAllParams>(opts?: {
     select?: (search: TAllParams) => TSelected
   }): TSelected => {

packages/react-router/src/useSetSearch.tsx

@@ -0,0 +1,44 @@
+import { AnyRoute } from './route'
+import { RouteIds, RouteById } from './routeInfo'
+import { RegisteredRouter } from './router'
+import { RouteMatch } from './Matches'
+import { useMatch } from './Matches'
+import { useRouter } from './RouterProvider'
+import React from 'react'
+
+export function useSetSearch<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TSearch extends Record<string, any> = RouteById<
+    TRouteTree,
+    TFrom
+  >['types']['fullSearchSchema'],
+>(opts: {
+  from: TFrom
+  replace: boolean | undefined
+}): (search: Partial<TSearch>) => void {
+  const router = useRouter()
+
+  const prevSearch = useMatch({
+    from: opts.from,
+    select: (match: RouteMatch) => {
+      return match.search
+    },
+  })
+
+  return React.useCallback((search: Partial<TSearch>) => {
+    const __tempSearch = { ...prevSearch, ...search }
+    const { hash, state, pathname } = router.state.location
+    const searchStr = router.options.stringifySearch(__tempSearch)
+
+    router.commitLocation({
+      replace: opts.replace ?? true,
+      pathname,
+      hash,
+      href: `${pathname}${searchStr}${hash}`,
+      search: __tempSearch,
+      searchStr,
+      state,
+    })
+  }, [])
+}