fix(core): use Link from react-router-dom (#3342)

apps/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx

@@ -52,7 +52,7 @@ export const ReferencePage = ({
         data-type="favorite-list-item"
         data-testid={`favorite-list-item-${pageId}`}
         active={active}
-        href={`/workspace/${workspace.id}/${pageId}`}
+        to={`/workspace/${workspace.id}/${pageId}`}
         icon={icon}
         collapsed={collapsible ? collapsed : undefined}
         onCollapsedChange={setCollapsed}

apps/core/src/components/root-app-sidebar/index.tsx

@@ -53,7 +53,7 @@ const RouteMenuLinkItem = React.forwardRef<
   HTMLDivElement,
   {
     currentPath: string; // todo: pass through useRouter?
-    path?: string | null;
+    path: string;
     icon: ReactElement;
     children?: ReactElement;
     isDraggedOver?: boolean;
@@ -66,7 +66,7 @@ const RouteMenuLinkItem = React.forwardRef<
       ref={ref}
       {...props}
       active={active}
-      href={path ?? ''}
+      to={path ?? ''}
       icon={icon}
     >
       {children}
@@ -169,7 +169,7 @@ export const RootAppSidebar = ({
           <RouteMenuLinkItem
             icon={<FolderIcon />}
             currentPath={currentPath}
-            path={currentWorkspaceId && paths.all(currentWorkspaceId)}
+            path={paths.all(currentWorkspaceId)}
             onClick={backToAll}
           >
             <span data-testid="all-pages">{t['All pages']()}</span>
@@ -198,7 +198,7 @@ export const RootAppSidebar = ({
             isDraggedOver={trashDroppable.isOver}
             icon={<DeleteTemporarilyIcon />}
             currentPath={currentPath}
-            path={currentWorkspaceId && paths.trash(currentWorkspaceId)}
+            path={paths.trash(currentWorkspaceId)}
           >
             <span data-testid="trash-page">{t['Trash']()}</span>
           </RouteMenuLinkItem>

apps/storybook/src/stories/app-sidebar.stories.tsx

@@ -24,6 +24,7 @@ import {
 import type { Meta, StoryFn } from '@storybook/react';
 import { useAtom } from 'jotai';
 import { type PropsWithChildren, useState } from 'react';
+import { MemoryRouter } from 'react-router-dom';
 
 export default {
   title: 'Components/AppSidebar',
@@ -31,18 +32,20 @@ export default {
 } satisfies Meta;
 
 const Container = ({ children }: PropsWithChildren) => (
-  <main
-    style={{
-      position: 'relative',
-      width: '100vw',
-      height: 'calc(100vh - 40px)',
-      overflow: 'hidden',
-      display: 'flex',
-      flexDirection: 'row',
-    }}
-  >
-    {children}
-  </main>
+  <MemoryRouter>
+    <main
+      style={{
+        position: 'relative',
+        width: '100vw',
+        height: 'calc(100vh - 40px)',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'row',
+      }}
+    >
+      {children}
+    </main>
+  </MemoryRouter>
 );
 const Main = () => {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
@@ -94,21 +97,21 @@ export const WithItems: StoryFn = () => {
           <div style={{ height: '20px' }} />
           <MenuLinkItem
             icon={<SettingsIcon />}
-            href="/test"
+            to="/test"
             onClick={() => alert('opened')}
           >
             Settings
           </MenuLinkItem>
           <MenuLinkItem
             icon={<SettingsIcon />}
-            href="/test"
+            to="/test"
             onClick={() => alert('opened')}
           >
             Settings
           </MenuLinkItem>
           <MenuLinkItem
             icon={<SettingsIcon />}
-            href="/test"
+            to="/test"
             onClick={() => alert('opened')}
           >
             Settings
@@ -121,7 +124,7 @@ export const WithItems: StoryFn = () => {
             collapsed={collapsed}
             onCollapsedChange={setCollapsed}
             icon={<SettingsIcon />}
-            href="/test"
+            to="/test"
             onClick={() => alert('opened')}
           >
             Collapsible Item
@@ -130,14 +133,14 @@ export const WithItems: StoryFn = () => {
             collapsed={!collapsed}
             onCollapsedChange={setCollapsed}
             icon={<SettingsIcon />}
-            href="/test"
+            to="/test"
             onClick={() => alert('opened')}
           >
             Collapsible Item
           </MenuLinkItem>
           <MenuLinkItem
             icon={<SettingsIcon />}
-            href="/test"
+            to="/test"
             onClick={() => alert('opened')}
           >
             Settings
@@ -146,7 +149,7 @@ export const WithItems: StoryFn = () => {
           <CategoryDivider label="Others" />
           <MenuLinkItem
             icon={<DeleteTemporarilyIcon />}
-            href="/test"
+            to="/test"
             onClick={() => alert('opened')}
           >
             Trash