fix: remove useHref

gravity-ui · Nov 13, 2024 · 22d219c · 22d219c
1 parent ad9588e
commit 22d219c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 27 deletions.
diff --git a/src/components/lab/router/README.md b/src/components/lab/router/README.md
@@ -31,12 +31,12 @@ function App() {
   const navigate = useNavigation();
 
   return (
-    <RouterProvider navigate={navigate} useHref={useHref}>
+    <RouterProvider navigate={navigate}}>
       <Link
-        href={{to:"/posts/$postId", params: {postId: '1'}}}
+        href="/posts"
         routerOptions={{replace: true}}
       >
-        Post 1 (local link)
+        Posts (local link)
       </Link>
       <Link href="https://gravity-ui.com">Gravity UI (external link)</Link>
     </RouterProvider>
@@ -83,7 +83,9 @@ function App() {
   const navigate = useNavigate();
 
   return (
-    <RouterProvider navigate={navigate} useHref={useHref}>{/*...*/}</RouterProvider>
+    <RouterProvider navigate={navigate}>
+      <Link href={useHref('/posts')} routerOptions={{replace: true}}>{/*...*/}</Link>
+    </RouterProvider>
   );
 }
 ```
@@ -151,7 +153,6 @@ import type {NavigateOptions, ToOptions} from '@tanstack/react-router';
 
 declare module '@gravity-ui/uikit' {
   interface RouterConfig {
-    href: ToOptions;
     routerOptions: Omit<NavigateOptions, keyof ToOptions>;
   }
 }
@@ -161,10 +162,9 @@ function App() {
 
   return (
     <RouterProvider
-      router={(to, opts) => router.navigate({...to, ...opts})}
-      useHref={(to) => router.buildLocation(to).href}
+      router={(to, opts) => router.navigate({to, ...opts})}
     >
-      {/*...*/}
+      <Link href={router.buildLocation('/posts').href} routerOptions={{replace: true}}>{/*...*/}</Link>
     </RouterProvider>
   );
 }

diff --git a/src/components/lab/router/__stories__/RouterProvider.stories.tsx b/src/components/lab/router/__stories__/RouterProvider.stories.tsx
@@ -4,7 +4,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 
 import {Link} from '../../../Link';
 import {Flex} from '../../../layout';
-import type {Href, RouterOptions} from '../../../types';
+import type {RouterOptions} from '../../../types';
 import {RouterProvider} from '../router';
 
 const meta: Meta<typeof RouterProvider> = {
@@ -26,21 +26,15 @@ export const Default = {
          *      }
          *  }
          */
-        type HrefType = {to: string; params: Record<string, string>} | string;
         return (
-            <RouterProvider
-                navigate={(href, opts) => console.log('Navigate to: ', {href, opts})}
-                useHref={(href: HrefType) =>
-                    typeof href === 'string' ? href : href.to.replace('$pastId', href.params.pastId)
-                }
-            >
+            <RouterProvider navigate={(href, opts) => console.log('Navigate to: ', {href, opts})}>
                 <Flex gap={2} direction="column">
                     <Link
                         view="primary"
-                        href={{to: '/posts/$pastId', params: {pastId: 'post-1'}} as unknown as Href}
+                        href="/posts"
                         routerOptions={{replace: true} as RouterOptions}
                     >
-                        Post 1 (local link)
+                        Posts (local link)
                     </Link>
                     <Link view="primary" href="https://gravity-ui.com">
                         Gravity UI (external link)

diff --git a/src/components/lab/router/router.tsx b/src/components/lab/router/router.tsx
@@ -9,21 +9,18 @@ interface RouterProps {
         href: Href,
         routerOptions: RouterOptions | undefined,
     ) => boolean;
-    useHref: (href: Href) => string;
 }
 
 const routerContext = React.createContext<RouterProps>({
     openLink: () => false,
-    useHref: (href) => href,
 });
 
 export interface RouterProviderProps {
     navigate: (href: Href, routerOptions: RouterOptions | undefined) => void;
-    useHref?: (href: Href) => string;
     children: React.ReactNode;
 }
 
-export function RouterProvider({navigate, useHref, children}: RouterProviderProps) {
+export function RouterProvider({navigate, children}: RouterProviderProps) {
     const value: RouterProps = React.useMemo(
         () => ({
             openLink: (link, modifiers, href, routerOptions) => {
@@ -33,9 +30,8 @@ export function RouterProvider({navigate, useHref, children}: RouterProviderProp
                 }
                 return false;
             },
-            useHref: useHref || ((href: Href) => href),
         }),
-        [navigate, useHref],
+        [navigate],
     );
 
     return <routerContext.Provider value={value}>{children}</routerContext.Provider>;
@@ -89,10 +85,9 @@ interface LinkProps {
 }
 
 export function useLinkProps(props: LinkProps) {
-    const {useHref, openLink} = useRouter();
-    const href = useHref(props.href ?? '');
+    const {openLink} = useRouter();
     return {
-        href: props.href ? href : undefined,
+        href: props.href,
         hrefLang: props.hrefLang,
         target: props.target,
         rel: props.target === '_blank' && !props.rel ? 'noopener noreferrer' : props.rel,