使用服务端渲染实现购买页面跳转

src/app/(home)/product/page.tsx

@@ -1,8 +1,12 @@
 import BreadCrumb from '@/components/bread-crumb'
 import Wrap from '@/components/wrap'
-import Purchase from '@/components/composites/purchase'
+import Purchase, {TabType} from '@/components/composites/purchase'
 
-export type ProductPageProps = {}
+export type ProductPageProps = {
+  searchParams?: {
+    type?: TabType
+  }
+}
 
 export default function ProductPage(props: ProductPageProps) {
   return (
@@ -11,7 +15,7 @@ export default function ProductPage(props: ProductPageProps) {
         <BreadCrumb items={[
           {label: '产品中心', href: '/product'},
         ]}/>
-        <Purchase/>
+        <Purchase defaultType={props.searchParams?.type ?? 'short'}/>
       </Wrap>
     </main>
   )

src/app/admin/purchase/page.tsx

@@ -1,12 +1,16 @@
-import Purchase from '@/components/composites/purchase'
+import Purchase, {TabType} from '@/components/composites/purchase'
 import Page from '@/components/page'
 
-export type PurchasePageProps = {}
+export type PurchasePageProps = {
+  searchParams?: {
+    type?: TabType
+  }
+}
 
 export default async function PurchasePage(props: PurchasePageProps) {
   return (
     <Page className="flex-col">
-      <Purchase/>
+      <Purchase defaultType={props.searchParams?.type ?? 'short'}/>
     </Page>
   )
 }

src/components/composites/purchase/index.tsx

@@ -1,23 +1,19 @@
-'use client'
+import {ReactNode} from 'react'
-import {ReactNode, useContext} from 'react'
 import {merge} from '@/lib/utils'
 import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
 import LongForm from '@/components/composites/purchase/long/form'
 import ShortForm from '@/components/composites/purchase/short/form'
-import Link from 'next/link'
-import {useSearchParams} from 'next/navigation'
-import {HeaderContext} from '@/app/(home)/@header/_client/provider'
-import {useRouter} from 'next/navigation'
 
 export type TabType = 'short' | 'long' | 'fixed' | 'custom'
 
-export default function Purchase() {
+type PurchaseProps = {
-  const searchParams = useSearchParams()
+  defaultType: TabType
-  const defaultTab = searchParams?.get('type') as TabType || 'short'
+}
+
+export default async function Purchase(props: PurchaseProps) {
   return (
-    <>
     <div className="flex flex-col gap-4">
-        <Tabs value={defaultTab} className="gap-4">
+      <Tabs defaultValue={props.defaultType} className="gap-4">
         <TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
           <Tab value="short">短效动态</Tab>
           <Tab value="long">长效静态</Tab>
@@ -32,7 +28,6 @@ export default function Purchase() {
         </TabsContent>
       </Tabs>
     </div>
-    </>
   )
 }
 
@@ -40,33 +35,15 @@ function Tab(props: {
   value: string
   children: ReactNode
 }) {
-  const ctx = useContext(HeaderContext)
-  const router = useRouter()
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    if (ctx) {
-      ctx.setMenu(false)
-    }
-  }
   return (
-    <Link
-      href={{
-        pathname: '/product',
-        query: {type: props.value},
-      }}
-      passHref
-      legacyBehavior // 如果需要兼容旧版行为
-    >
     <TabsTrigger
       className={merge(
         `w-36 h-12 text-base font-normal flex-none`,
         `data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
       )}
       value={props.value}
-        onClick={handleClick}>
+    >
       {props.children}
     </TabsTrigger>
-    </Link>
   )
 }