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

packages/component/src/components/app-sidebar/menu-item/index.stories.tsx

@@ -18,7 +18,7 @@ export const Default: StoryFn = () => {
       </MenuItem>
       <MenuLinkItem
         icon={<SettingsIcon />}
-        href="/test"
+        to="/test"
         onClick={() => alert('opened')}
       >
         Normal Link Item
@@ -26,7 +26,7 @@ export const Default: StoryFn = () => {
       <MenuLinkItem
         active
         icon={<SettingsIcon />}
-        href="/test"
+        to="/test"
         onClick={() => alert('opened')}
       >
         Primary Item

packages/component/src/components/app-sidebar/menu-item/index.tsx

@@ -1,7 +1,8 @@
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
-import { Link, type LinkProps } from '@mui/material';
 import clsx from 'clsx';
 import React from 'react';
+import type { LinkProps } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import * as styles from './index.css';
 
@@ -16,7 +17,7 @@ export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export interface MenuLinkItemProps
   extends MenuItemProps,
-    Pick<LinkProps, 'href'> {}
+    Pick<LinkProps, 'to'> {}
 
 const stopPropagation: React.MouseEventHandler = e => {
   e.stopPropagation();
@@ -90,9 +91,9 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
 MenuItem.displayName = 'MenuItem';
 
 export const MenuLinkItem = React.forwardRef<HTMLDivElement, MenuLinkItemProps>(
-  ({ href, ...props }, ref) => {
+  ({ to, ...props }, ref) => {
     return (
-      <Link href={href} className={styles.linkItemRoot}>
+      <Link to={to} className={styles.linkItemRoot}>
         {/* The <a> element rendered by Link does not generate display box due to `display: contents` style */}
         {/* Thus ref is passed to MenuItem instead of Link */}
         <MenuItem ref={ref} {...props}></MenuItem>