130 lines
4.5 KiB
TypeScript
130 lines
4.5 KiB
TypeScript
import { type AppRouterInstance } from '../../shared/lib/app-router-context.shared-runtime';
|
|
import { ReadonlyURLSearchParams } from './navigation.react-server';
|
|
/**
|
|
* A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
|
|
* that lets you *read* the current URL's search parameters.
|
|
*
|
|
* Learn more about [`URLSearchParams` on MDN](https://developer.mozilla.org/docs/Web/API/URLSearchParams)
|
|
*
|
|
* @example
|
|
* ```ts
|
|
* "use client"
|
|
* import { useSearchParams } from 'next/navigation'
|
|
*
|
|
* export default function Page() {
|
|
* const searchParams = useSearchParams()
|
|
* searchParams.get('foo') // returns 'bar' when ?foo=bar
|
|
* // ...
|
|
* }
|
|
* ```
|
|
*
|
|
* Read more: [Next.js Docs: `useSearchParams`](https://nextjs.org/docs/app/api-reference/functions/use-search-params)
|
|
*/
|
|
declare function useSearchParams(): ReadonlyURLSearchParams;
|
|
/**
|
|
* A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
|
|
* that lets you read the current URL's pathname.
|
|
*
|
|
* @example
|
|
* ```ts
|
|
* "use client"
|
|
* import { usePathname } from 'next/navigation'
|
|
*
|
|
* export default function Page() {
|
|
* const pathname = usePathname() // returns "/dashboard" on /dashboard?foo=bar
|
|
* // ...
|
|
* }
|
|
* ```
|
|
*
|
|
* Read more: [Next.js Docs: `usePathname`](https://nextjs.org/docs/app/api-reference/functions/use-pathname)
|
|
*/
|
|
declare function usePathname(): string;
|
|
import { ServerInsertedHTMLContext, useServerInsertedHTML } from '../../shared/lib/server-inserted-html.shared-runtime';
|
|
/**
|
|
*
|
|
* This hook allows you to programmatically change routes inside [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components).
|
|
*
|
|
* @example
|
|
* ```ts
|
|
* "use client"
|
|
* import { useRouter } from 'next/navigation'
|
|
*
|
|
* export default function Page() {
|
|
* const router = useRouter()
|
|
* // ...
|
|
* router.push('/dashboard') // Navigate to /dashboard
|
|
* }
|
|
* ```
|
|
*
|
|
* Read more: [Next.js Docs: `useRouter`](https://nextjs.org/docs/app/api-reference/functions/use-router)
|
|
*/
|
|
declare function useRouter(): AppRouterInstance;
|
|
interface Params {
|
|
[key: string]: string | string[];
|
|
}
|
|
/**
|
|
* A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
|
|
* that lets you read a route's dynamic params filled in by the current URL.
|
|
*
|
|
* @example
|
|
* ```ts
|
|
* "use client"
|
|
* import { useParams } from 'next/navigation'
|
|
*
|
|
* export default function Page() {
|
|
* // on /dashboard/[team] where pathname is /dashboard/nextjs
|
|
* const { team } = useParams() // team === "nextjs"
|
|
* }
|
|
* ```
|
|
*
|
|
* Read more: [Next.js Docs: `useParams`](https://nextjs.org/docs/app/api-reference/functions/use-params)
|
|
*/
|
|
declare function useParams<T extends Params = Params>(): T;
|
|
/**
|
|
* A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
|
|
* that lets you read the active route segments **below** the Layout it is called from.
|
|
*
|
|
* @example
|
|
* ```ts
|
|
* 'use client'
|
|
*
|
|
* import { useSelectedLayoutSegments } from 'next/navigation'
|
|
*
|
|
* export default function ExampleClientComponent() {
|
|
* const segments = useSelectedLayoutSegments()
|
|
*
|
|
* return (
|
|
* <ul>
|
|
* {segments.map((segment, index) => (
|
|
* <li key={index}>{segment}</li>
|
|
* ))}
|
|
* </ul>
|
|
* )
|
|
* }
|
|
* ```
|
|
*
|
|
* Read more: [Next.js Docs: `useSelectedLayoutSegments`](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segments)
|
|
*/
|
|
declare function useSelectedLayoutSegments(parallelRouteKey?: string): string[];
|
|
/**
|
|
* A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
|
|
* that lets you read the active route segment **one level below** the Layout it is called from.
|
|
*
|
|
* @example
|
|
* ```ts
|
|
* 'use client'
|
|
* import { useSelectedLayoutSegment } from 'next/navigation'
|
|
*
|
|
* export default function ExampleClientComponent() {
|
|
* const segment = useSelectedLayoutSegment()
|
|
*
|
|
* return <p>Active segment: {segment}</p>
|
|
* }
|
|
* ```
|
|
*
|
|
* Read more: [Next.js Docs: `useSelectedLayoutSegment`](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment)
|
|
*/
|
|
declare function useSelectedLayoutSegment(parallelRouteKey?: string): string | null;
|
|
export { useSearchParams, usePathname, useSelectedLayoutSegment, useSelectedLayoutSegments, useParams, useRouter, useServerInsertedHTML, ServerInsertedHTMLContext, };
|
|
export { notFound, redirect, permanentRedirect, RedirectType, ReadonlyURLSearchParams, } from './navigation.react-server';
|