@tanstack/react-router
Version:
Modern and scalable routing for React applications
1 lines • 2.94 kB
Source Map (JSON)
{"version":3,"file":"useNavigate.cjs","names":[],"sources":["../../src/useNavigate.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useLayoutEffect } from './utils'\nimport { useRouter } from './useRouter'\nimport type {\n AnyRouter,\n FromPathOption,\n NavigateOptions,\n RegisteredRouter,\n UseNavigateResult,\n} from '@tanstack/router-core'\n\n/**\n * Imperative navigation hook.\n *\n * Returns a stable `navigate(options)` function to change the current location\n * programmatically. Prefer the `Link` component for user-initiated navigation,\n * and use this hook from effects, callbacks, or handlers where imperative\n * navigation is required.\n *\n * Options:\n * - `from`: Optional route base used to resolve relative `to` paths.\n *\n * @returns A function that accepts `NavigateOptions`.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useNavigateHook\n */\nexport function useNavigate<\n TRouter extends AnyRouter = RegisteredRouter,\n TDefaultFrom extends string = string,\n>(_defaultOpts?: {\n from?: FromPathOption<TRouter, TDefaultFrom>\n}): UseNavigateResult<TDefaultFrom> {\n const router = useRouter()\n\n return React.useCallback(\n (options: NavigateOptions) => {\n return router.navigate({\n ...options,\n from: options.from ?? _defaultOpts?.from,\n })\n },\n [_defaultOpts?.from, router],\n ) as UseNavigateResult<TDefaultFrom>\n}\n\n/**\n * Component that triggers a navigation when rendered. Navigation executes\n * in an effect after mount/update.\n *\n * Props are the same as `NavigateOptions` used by `navigate()`.\n *\n * @returns null\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/navigateComponent\n */\nexport function Navigate<\n TRouter extends AnyRouter = RegisteredRouter,\n const TFrom extends string = string,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {\n const router = useRouter()\n const navigate = useNavigate()\n\n const previousPropsRef = React.useRef<NavigateOptions<\n TRouter,\n TFrom,\n TTo,\n TMaskFrom,\n TMaskTo\n > | null>(null)\n useLayoutEffect(() => {\n if (previousPropsRef.current !== props) {\n navigate(props)\n previousPropsRef.current = props\n }\n }, [router, props, navigate])\n return null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,YAGd,cAEkC;CAClC,MAAM,SAAS,kBAAA,WAAW;AAE1B,QAAO,MAAM,aACV,YAA6B;AAC5B,SAAO,OAAO,SAAS;GACrB,GAAG;GACH,MAAM,QAAQ,QAAQ,cAAc;GACrC,CAAC;IAEJ,CAAC,cAAc,MAAM,OAAO,CAC7B;;;;;;;;;;;AAYH,SAAgB,SAMd,OAAuE;CACvE,MAAM,SAAS,kBAAA,WAAW;CAC1B,MAAM,WAAW,aAAa;CAE9B,MAAM,mBAAmB,MAAM,OAMrB,KAAK;AACf,eAAA,sBAAsB;AACpB,MAAI,iBAAiB,YAAY,OAAO;AACtC,YAAS,MAAM;AACf,oBAAiB,UAAU;;IAE5B;EAAC;EAAQ;EAAO;EAAS,CAAC;AAC7B,QAAO"}