feat(react-router): implement the typed useNavigate hook onto the Route and LazyRoute class

docs/framework/react/api/router/FileRouteClass.md

@@ -38,7 +38,7 @@ The `createRoute` method is a method that can be used to configure the file rout
 
 #### .createRoute returns
 
-- A `Route` instance that can be used to create a route tree.
+- A [`Route`](./api/router/RouteClass) instance that can be used to configure the route for the eventual route-tree.
 
 > ⚠️ Note: For `tsr generate` and `tsr watch` to work properly, the file route instance must be exported from the file using the `Route` identifier.
 

packages/react-router/src/fileRoute.ts

@@ -1,8 +1,9 @@
 import warning from 'tiny-warning'
-import { RouteOptions, createRoute } from './route'
+import { createRoute } from './route'
 import { useLoaderData, useLoaderDeps, useMatch } from './Matches'
 import { useSearch } from './useSearch'
 import { useParams } from './useParams'
+import { useNavigate } from './useNavigate'
 import type { ParsePathParams } from './link'
 import type {
   AnyContext,
@@ -340,6 +341,10 @@ export class LazyRoute<TRoute extends AnyRoute> {
   }): TSelected => {
     return useLoaderData({ ...opts, from: this.options.id } as any)
   }
+
+  useNavigate = () => {
+    return useNavigate({ from: this.options.id })
+  }
 }
 
 export function createLazyRoute<

packages/react-router/src/route.ts

@@ -887,6 +887,10 @@ export class Route<
   }): TSelected => {
     return useLoaderData({ ...opts, from: this.id } as any)
   }
+
+  useNavigate = () => {
+    return useNavigate({ from: this.id })
+  }
 }
 
 export function createRoute<

packages/react-router/tests/fileRoute.test.ts

@@ -0,0 +1,49 @@
+/* eslint-disable */
+import { describe, it, expect } from 'vitest'
+import {
+  getRouteApi,
+  createFileRoute,
+  createLazyRoute,
+  createLazyFileRoute,
+} from '../src'
+
+describe('createFileRoute has the same hooks as getRouteApi', () => {
+  const routeApi = getRouteApi('foo')
+  const hookNames = Object.keys(routeApi).filter((key) => key.startsWith('use'))
+  // @ts-expect-error
+  const route = createFileRoute('')({})
+
+  it.each(hookNames.map((name) => [name]))(
+    'should have the "%s" hook defined',
+    (hookName) => {
+      expect(route[hookName]).toBeDefined()
+    },
+  )
+})
+
+describe('createLazyFileRoute has the same hooks as getRouteApi', () => {
+  const routeApi = getRouteApi('foo')
+  const hookNames = Object.keys(routeApi).filter((key) => key.startsWith('use'))
+  // @ts-expect-error
+  const route = createLazyFileRoute('')({})
+
+  it.each(hookNames.map((name) => [name]))(
+    'should have the "%s" hook defined',
+    (hookName) => {
+      expect(route[hookName]).toBeDefined()
+    },
+  )
+})
+
+describe('createLazyRoute has the same hooks as getRouteApi', () => {
+  const routeApi = getRouteApi('foo')
+  const hookNames = Object.keys(routeApi).filter((key) => key.startsWith('use'))
+  const route = createLazyRoute({})({})
+
+  it.each(hookNames.map((name) => [name]))(
+    'should have the "%s" hook defined',
+    (hookName) => {
+      expect(route[hookName]).toBeDefined()
+    },
+  )
+})

packages/react-router/tests/route.test.ts

@@ -0,0 +1,53 @@
+/* eslint-disable */
+import { describe, it, expect } from 'vitest'
+import { getRouteApi, createRoute } from '../src'
+
+describe('getRouteApi', () => {
+  it('should have the useMatch hook', () => {
+    const api = getRouteApi('foo')
+    expect(api.useMatch).toBeDefined()
+  })
+
+  it('should have the useRouteContext hook', () => {
+    const api = getRouteApi('foo')
+    expect(api.useRouteContext).toBeDefined()
+  })
+
+  it('should have the useSearch hook', () => {
+    const api = getRouteApi('foo')
+    expect(api.useSearch).toBeDefined()
+  })
+
+  it('should have the useParams hook', () => {
+    const api = getRouteApi('foo')
+    expect(api.useParams).toBeDefined()
+  })
+
+  it('should have the useLoaderData hook', () => {
+    const api = getRouteApi('foo')
+    expect(api.useLoaderData).toBeDefined()
+  })
+
+  it('should have the useLoaderDeps hook', () => {
+    const api = getRouteApi('foo')
+    expect(api.useLoaderDeps).toBeDefined()
+  })
+
+  it('should have the useNavigate hook', () => {
+    const api = getRouteApi('foo')
+    expect(api.useNavigate).toBeDefined()
+  })
+})
+
+describe('createRoute has the same hooks as getRouteApi', () => {
+  const routeApi = getRouteApi('foo')
+  const hookNames = Object.keys(routeApi).filter((key) => key.startsWith('use'))
+  const route = createRoute({} as any)
+
+  it.each(hookNames.map((name) => [name]))(
+    'should have the "%s" hook defined',
+    (hookName) => {
+      expect(route[hookName]).toBeDefined()
+    },
+  )
+})