@lobehub/lobehub 2.0.0-next.71 → 2.0.0-next.73

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Details/index.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { useResponsive } from 'antd-style';
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useQueryState } from '@/hooks/useQueryParam';
 import { ModelNavKey } from '@/types/discover';
 
 import Sidebar from '../Sidebar';

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Header.tsx

@@ -11,7 +11,7 @@ import { Flexbox } from 'react-layout-kit';
 import ModelTypeIcon from '@/app/[variants]/(main)/discover/(list)/model/features/List/ModelTypeIcon';
 import { ModelInfoTags } from '@/components/ModelSelect';
 
-import PublishedTime from '../../../../../../../../components/PublishedTime';
+import PublishedTime from '../../../../../../../components/PublishedTime';
 import { useDetailContext } from './DetailProvider';
 
 const useStyles = createStyles(({ css, token }) => {

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Sidebar/ActionButton/ChatWithModel.tsx

@@ -6,9 +6,9 @@ import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import { ChevronDownIcon } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'nextjs-toploader/app';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import urlJoin from 'url-join';
 
 import { useDetailContext } from '../../DetailProvider';
@@ -26,7 +26,7 @@ const ChatWithModel = memo(() => {
   const { t } = useTranslation('discover');
   const { providers = [] } = useDetailContext();
   const includeLobeHub = providers.some((item) => item.id === 'lobehub');
-  const route = useRouter();
+  const navigate = useNavigate();
   const list = providers.filter((provider) => provider.id !== 'lobehub');
 
   const items = list.map((item) => ({
@@ -40,7 +40,7 @@ const ChatWithModel = memo(() => {
   }));
 
   const handleLobeHubChat = () => {
-    route.push('/chat');
+    navigate('/chat');
   };
 
   if (includeLobeHub)

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Sidebar/ActionButton/index.tsx

@@ -7,7 +7,7 @@ import urlJoin from 'url-join';
 
 import { OFFICIAL_URL } from '@/const/url';
 
-import ShareButton from '../../../../../features/ShareButton';
+import ShareButton from '../../../../features/ShareButton';
 import { useDetailContext } from '../../DetailProvider';
 import ChatWithModel from './ChatWithModel';
 

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Sidebar/Related/index.tsx

@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 import { Link } from 'react-router-dom';
 import urlJoin from 'url-join';
 
-import Title from '../../../../../../features/Title';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 import Item from './Item';
 
@@ -28,7 +28,7 @@ const Related = memo(() => {
       </Title>
       <Flexbox gap={8}>
         {related?.map((item, index) => {
-          const link = urlJoin('/model', item.identifier);
+          const link = urlJoin('/discover/model', item.identifier);
           return (
             <Link key={index} style={{ color: 'inherit', overflow: 'hidden' }} to={link}>
               <Item {...item} />

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Sidebar/RelatedProviders/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import Title from '../../../../../../features/Title';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 import Item from './Item';
 

package/src/app/[variants]/(main)/discover/(detail)/model/{ModelDetailPage.tsx → index.tsx}

@@ -2,27 +2,26 @@
 
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { useParams } from 'react-router-dom';
+import { useLoaderData } from 'react-router-dom';
 
-import { withSuspense } from '@/components/withSuspense';
+import type { SlugParams } from '@/app/[variants]/loaders/routeParams';
 import { useDiscoverStore } from '@/store/discover';
 import { DiscoverTab } from '@/types/discover';
 
 import NotFound from '../components/NotFound';
 import Breadcrumb from '../features/Breadcrumb';
-import { DetailProvider } from './[...slugs]/features/DetailProvider';
-import Details from './[...slugs]/features/Details';
-import Header from './[...slugs]/features/Header';
-import Loading from './[...slugs]/loading';
+import { DetailProvider } from './features/DetailProvider';
+import Details from './features/Details';
+import Header from './features/Header';
+import Loading from './loading';
 
 interface ModelDetailPageProps {
   mobile?: boolean;
 }
 
 const ModelDetailPage = memo<ModelDetailPageProps>(({ mobile }) => {
-  const params = useParams();
-  const slugs = params['*']?.split('/') || [];
-  const identifier = decodeURIComponent(slugs.join('/'));
+  const { slug } = useLoaderData() as SlugParams;
+  const identifier = decodeURIComponent(slug);
 
   const useModelDetail = useDiscoverStore((s) => s.useModelDetail);
   const { data, isLoading } = useModelDetail({ identifier });
@@ -41,4 +40,12 @@ const ModelDetailPage = memo<ModelDetailPageProps>(({ mobile }) => {
   );
 });
 
-export default withSuspense(ModelDetailPage);
+const DesktopModelPage = memo<{ mobile?: boolean }>(() => {
+  return <ModelDetailPage mobile={false} />;
+});
+
+const MobileModelPage = memo<{ mobile?: boolean }>(() => {
+  return <ModelDetailPage mobile={true} />;
+});
+
+export { DesktopModelPage, MobileModelPage };

package/src/app/[variants]/(main)/discover/(detail)/model/loading.tsx

@@ -0,0 +1 @@
+export { DetailsLoading as default } from '../../components/ListLoading';

package/src/app/[variants]/(main)/discover/(detail)/provider/{[...slugs]/features → features}/Details/Related/index.tsx

@@ -2,8 +2,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import List from '../../../../../../(list)/provider/features/List';
-import Title from '../../../../../../features/Title';
+import List from '../../../../../(list)/provider/features/List';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 
 const Related = memo(() => {

package/src/app/[variants]/(main)/discover/(detail)/provider/{[...slugs]/features → features}/Details/index.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { useResponsive } from 'antd-style';
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useQueryState } from '@/hooks/useQueryParam';
 import { ProviderNavKey } from '@/types/discover';
 
 import Sidebar from '../Sidebar';

package/src/app/[variants]/(main)/discover/(detail)/provider/{[...slugs]/features → features}/Sidebar/ActionButton/ProviderConfig.tsx

@@ -6,9 +6,9 @@ import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import { ChevronDownIcon, SquareArrowOutUpRight } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'nextjs-toploader/app';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { useDetailContext } from '../../DetailProvider';
 
@@ -24,7 +24,7 @@ const ProviderConfig = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('discover');
   const { url, modelsUrl, identifier } = useDetailContext();
-  const router = useRouter();
+  const navigate = useNavigate();
   const openSettings = async () => {
     const searchParams = { active: 'provider', provider: identifier };
     const tab = 'provider';
@@ -37,8 +37,9 @@ const ProviderConfig = memo(() => {
       });
       return;
     }
-
-    router.push(`/settings?active=provider&provider=${identifier}`);
+    navigate(
+      `/settings?active=provider&provider=${identifier}`
+    )
   };
 
   const icon = <Icon icon={SquareArrowOutUpRight} size={16} />;

package/src/app/[variants]/(main)/discover/(detail)/provider/{[...slugs]/features → features}/Sidebar/ActionButton/index.tsx

@@ -9,7 +9,7 @@ import urlJoin from 'url-join';
 
 import { OFFICIAL_URL } from '@/const/url';
 
-import ShareButton from '../../../../../features/ShareButton';
+import ShareButton from '../../../../features/ShareButton';
 import { useDetailContext } from '../../DetailProvider';
 import ProviderConfig from './ProviderConfig';
 

package/src/app/[variants]/(main)/discover/(detail)/provider/{[...slugs]/features → features}/Sidebar/Related/index.tsx

@@ -4,7 +4,7 @@ import { Flexbox } from 'react-layout-kit';
 import { Link } from 'react-router-dom';
 import urlJoin from 'url-join';
 
-import Title from '../../../../../../features/Title';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 import Item from './Item';
 
@@ -19,7 +19,7 @@ const Related = memo(() => {
       </Title>
       <Flexbox gap={8}>
         {related?.map((item, index) => {
-          const link = urlJoin('/provider', item.identifier);
+          const link = urlJoin('/discover/provider', item.identifier);
           return (
             <Link key={index} style={{ color: 'inherit', overflow: 'hidden' }} to={link}>
               <Item {...item} />

package/src/app/[variants]/(main)/discover/(detail)/provider/{[...slugs]/features → features}/Sidebar/RelatedModels/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import Title from '../../../../../../features/Title';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 import Item from './Item';
 

package/src/app/[variants]/(main)/discover/(detail)/provider/{ProviderDetailPage.tsx → index.tsx}

@@ -2,27 +2,26 @@
 
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { useParams } from 'react-router-dom';
+import { useLoaderData } from 'react-router-dom';
 
-import { withSuspense } from '@/components/withSuspense';
+import type { SlugParams } from '@/app/[variants]/loaders/routeParams';
 import { useDiscoverStore } from '@/store/discover';
 import { DiscoverTab } from '@/types/discover';
 
 import NotFound from '../components/NotFound';
 import Breadcrumb from '../features/Breadcrumb';
-import { DetailProvider } from './[...slugs]/features/DetailProvider';
-import Details from './[...slugs]/features/Details';
-import Header from './[...slugs]/features/Header';
-import Loading from './[...slugs]/loading';
+import { DetailProvider } from './features/DetailProvider';
+import Details from './features/Details';
+import Header from './features/Header';
+import Loading from './loading';
 
 interface ProviderDetailPageProps {
   mobile?: boolean;
 }
 
 const ProviderDetailPage = memo<ProviderDetailPageProps>(({ mobile }) => {
-  const params = useParams();
-  const slugs = params['*']?.split('/') || [];
-  const identifier = decodeURIComponent(slugs.join('/'));
+  const { slug } = useLoaderData() as SlugParams;
+  const identifier = decodeURIComponent(slug);
 
   const useProviderDetail = useDiscoverStore((s) => s.useProviderDetail);
   const { data, isLoading } = useProviderDetail({ identifier, withReadme: true });
@@ -41,4 +40,12 @@ const ProviderDetailPage = memo<ProviderDetailPageProps>(({ mobile }) => {
   );
 });
 
-export default withSuspense(ProviderDetailPage);
+const DesktopProviderPage = memo<{ mobile?: boolean }>(() => {
+  return <ProviderDetailPage mobile={false} />;
+});
+
+const MobileProviderPage = memo<{ mobile?: boolean }>(() => {
+  return <ProviderDetailPage mobile={true} />;
+});
+
+export { DesktopProviderPage, MobileProviderPage };

package/src/app/[variants]/(main)/discover/(detail)/provider/loading.tsx

@@ -0,0 +1 @@
+export { DetailsLoading as default } from '../../components/ListLoading';

package/src/app/[variants]/(main)/discover/(list)/(home)/{HomePage.tsx → index.tsx}

@@ -42,4 +42,18 @@ const HomePage = memo<{ mobile?: boolean }>(() => {
   );
 });
 
+const MobileHomePage = memo<{ mobile?: boolean }>(() => {
+  return <HomePage mobile={true} />;
+});
+
+MobileHomePage.displayName = 'MobileHomePage';
+
+const DesktopHomePage = memo<{ mobile?: boolean }>(() => {
+  return <HomePage mobile={false} />;
+});
+
+DesktopHomePage.displayName = 'DesktopHomePage';
+
+export { DesktopHomePage, MobileHomePage };
 export default HomePage;
+

package/src/app/[variants]/(main)/discover/(list)/_layout/Desktop/Nav.tsx

@@ -7,7 +7,6 @@ import { memo, useState } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { withSuspense } from '@/components/withSuspense';
 import { useQuery } from '@/hooks/useQuery';
 import { DiscoverTab } from '@/types/discover';
 
@@ -76,7 +75,7 @@ const Nav = memo(() => {
             compact
             items={items as any}
             onChange={(key) => {
-              const path = key === DiscoverTab.Home ? '/' : `/${key}`;
+              const path = key === DiscoverTab.Home ? '/discover' : `/discover/${key}`;
               const search = q ? `?q=${encodeURIComponent(q)}` : '';
               navigate(path + search, { replace: true });
               const scrollableElement = document?.querySelector(`#${SCROLL_PARENT_ID}`);
@@ -99,4 +98,4 @@ const Nav = memo(() => {
   );
 });
 
-export default withSuspense(Nav);
+export default Nav;

package/src/app/[variants]/(main)/discover/(list)/_layout/Desktop/index.tsx

@@ -1,12 +1,13 @@
-import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import Footer from '@/features/Setting/Footer';
 
+import { Outlet } from 'react-router-dom';
+
 import { MAX_WIDTH, SCROLL_PARENT_ID } from '../../../features/const';
 import Nav from './Nav';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <>
       <Nav />
@@ -23,7 +24,7 @@ const Layout = ({ children }: PropsWithChildren) => {
           style={{ maxWidth: MAX_WIDTH, paddingTop: 64, position: 'relative' }}
           width={'100%'}
         >
-          {children}
+          {<Outlet />}
           <div />
           <Footer />
         </Flexbox>

package/src/app/[variants]/(main)/discover/(list)/_layout/Mobile/Nav.tsx

@@ -9,7 +9,6 @@ import { Flexbox } from 'react-layout-kit';
 import { useNavigate } from 'react-router-dom';
 
 import Menu from '@/components/Menu';
-import { withSuspense } from '@/components/withSuspense';
 import { DiscoverTab } from '@/types/discover';
 
 import { useNav } from '../../../features/useNav';
@@ -78,9 +77,9 @@ const Nav = memo(() => {
           items={items}
           onClick={({ key }) => {
             if (key === DiscoverTab.Home) {
-              navigate('/');
+              navigate('/discover');
             } else {
-              navigate(`/${key}`);
+              navigate(`/discover/${key}`);
             }
           }}
           selectable
@@ -91,4 +90,4 @@ const Nav = memo(() => {
   );
 });
 
-export default withSuspense(Nav);
+export default Nav;

package/src/app/[variants]/(main)/discover/(list)/_layout/Mobile/index.tsx

@@ -1,12 +1,13 @@
-import { PropsWithChildren } from 'react';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 import Footer from '@/features/Setting/Footer';
 
 import { SCROLL_PARENT_ID } from '../../../features/const';
 import Header from './Header';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
+
+const Layout = () => {
   return (
     <MobileContentLayout
       gap={16}
@@ -15,7 +16,7 @@ const Layout = ({ children }: PropsWithChildren) => {
       style={{ paddingInline: 16, paddingTop: 8 }}
       withNav
     >
-      {children}
+      <Outlet />
       <div />
       <Footer />
     </MobileContentLayout>

package/src/app/[variants]/(main)/discover/(list)/assistant/_layout/Desktop.tsx

@@ -1,17 +1,16 @@
-import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
-
+import { Outlet } from 'react-router-dom';
 import CategoryContainer from '../../../components/CategoryContainer';
 import Category from '../features/Category';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
       <CategoryContainer>
         <Category />
       </CategoryContainer>
       <Flexbox flex={1} gap={16}>
-        {children}
+        <Outlet />
       </Flexbox>
     </Flexbox>
   );

package/src/app/[variants]/(main)/discover/(list)/assistant/_layout/Mobile.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
-  return children;
+const Layout = () => {
+  return <Outlet />;
 };
 
 Layout.displayName = 'MobileDiscoverAssistantsLayout';

package/src/app/[variants]/(main)/discover/(list)/assistant/features/List/Item.tsx

@@ -64,17 +64,17 @@ const AssistantItem = memo<DiscoverAssistantItem>(
     backgroundColor,
   }) => {
 
-    console.log("author",author)
     const { styles, theme } = useStyles();
     const navigate = useNavigate();
     const { source } = useQuery() as { source?: AssistantMarketSource };
     const link = qs.stringifyUrl(
       {
         query: { source },
-        url: urlJoin('/assistant', identifier),
+        url: urlJoin('/discover/assistant', identifier),
       },
       { skipNull: true },
     );
+
     const { t } = useTranslation('discover');
 
     return (

package/src/app/[variants]/(main)/discover/(list)/assistant/{AssistantPage.tsx → index.tsx}

@@ -3,7 +3,6 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { withSuspense } from '@/components/withSuspense';
 import { useQuery } from '@/hooks/useQuery';
 import { useDiscoverStore } from '@/store/discover';
 import { AssistantQueryParams, DiscoverTab } from '@/types/discover';
@@ -25,8 +24,6 @@ const AssistantPage = memo<{ mobile?: boolean }>(() => {
     source,
   });
 
-  console.log("data",data)
-
   if (isLoading || !data) return <Loading />;
 
   const { items, currentPage, pageSize, totalCount } = data;
@@ -44,4 +41,21 @@ const AssistantPage = memo<{ mobile?: boolean }>(() => {
   );
 });
 
-export default withSuspense(AssistantPage);
+const MobileAssistantPage = memo<{ mobile?: boolean }>(() => {
+  return (
+    <AssistantPage mobile={true} />
+  );
+});
+
+const DesktopAssistantPage = memo<{ mobile?: boolean }>(() => {
+  return (
+    <AssistantPage mobile={false} />
+  );
+});
+
+MobileAssistantPage.displayName = 'MobileAssistantPage';
+
+DesktopAssistantPage.displayName = 'DesktopAssistantPage';
+
+export { DesktopAssistantPage, MobileAssistantPage };
+export default AssistantPage;

package/src/app/[variants]/(main)/discover/(list)/features/SortButton/index.tsx

@@ -1,11 +1,11 @@
 import { Dropdown, DropdownMenuItemType, Icon } from '@lobehub/ui';
 import { Button } from 'antd';
 import { ArrowDownWideNarrow, ChevronDown } from 'lucide-react';
-import { usePathname } from 'next/navigation';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useQuery } from '@/hooks/useQuery';
+import { usePathname } from '@/app/[variants]/(main)/hooks/usePathname';
+import { useQuery } from '@/app/[variants]/(main)/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
 import {

package/src/app/[variants]/(main)/discover/(list)/mcp/_layout/Desktop.tsx

@@ -1,17 +1,17 @@
-import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import CategoryContainer from '../../../components/CategoryContainer';
 import Category from '../features/Category';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
       <CategoryContainer>
         <Category />
       </CategoryContainer>
       <Flexbox flex={1} gap={16}>
-        {children}
+        <Outlet />
       </Flexbox>
     </Flexbox>
   );

package/src/app/[variants]/(main)/discover/(list)/mcp/_layout/Mobile.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
-  return children;
+const Layout = () => {
+  return <Outlet />;
 };
 
 Layout.displayName = 'MobileDiscoverToolsLayout';

package/src/app/[variants]/(main)/discover/(list)/mcp/features/List/Item.tsx

@@ -78,7 +78,7 @@ const McpItem = memo<DiscoverMcpItem>(
     const { t } = useTranslation('discover');
     const { styles, theme } = useStyles();
     const navigate = useNavigate();
-    const link = urlJoin('/mcp', identifier);
+    const link = urlJoin('/discover/mcp', identifier);
     return (
       <Block
         clickable

package/src/app/[variants]/(main)/discover/(list)/mcp/{McpPage.tsx → index.tsx}

@@ -3,7 +3,6 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { withSuspense } from '@/components/withSuspense';
 import { useQuery } from '@/hooks/useQuery';
 import { useDiscoverStore } from '@/store/discover';
 import { DiscoverTab, McpQueryParams } from '@/types/discover';
@@ -41,4 +40,12 @@ const McpPage = memo<{ mobile?: boolean }>(() => {
   );
 });
 
-export default withSuspense(McpPage);
+const DesktopMcpPage = memo<{ mobile?: boolean }>(() => {
+  return <McpPage mobile={false} />;
+});
+
+const MobileMcpPage = memo<{ mobile?: boolean }>(() => {
+  return <McpPage mobile={true} />;
+});
+
+export { DesktopMcpPage, MobileMcpPage };

package/src/app/[variants]/(main)/discover/(list)/model/_layout/Desktop.tsx

@@ -1,17 +1,17 @@
-import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { Outlet } from 'react-router-dom';
 
 import CategoryContainer from '../../../components/CategoryContainer';
 import Category from '../features/Category';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
       <CategoryContainer>
         <Category />
       </CategoryContainer>
       <Flexbox flex={1} gap={16}>
-        {children}
+        {<Outlet />}
       </Flexbox>
     </Flexbox>
   );

package/src/app/[variants]/(main)/discover/(list)/model/_layout/Mobile.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
-  return children;
+const Layout = () => {
+  return <Outlet />;
 };
 
 Layout.displayName = 'MobileDiscoverModelsLayout';

package/src/app/[variants]/(main)/discover/(list)/model/features/List/Item.tsx

@@ -57,7 +57,7 @@ const ModelItem = memo<DiscoverModelItem>(
     const { t } = useTranslation(['models', 'discover']);
     const { styles } = useStyles();
     const navigate = useNavigate();
-    const link = urlJoin('/model', identifier);
+    const link = urlJoin('/discover/model', identifier);
     return (
       <Block
         clickable