How to navigate to the specific Tab component from the another pages using next router?

[cupid20103]

Hello, Everyone!
I am facing the problem that related with Tab component of shadcn UI + next.js.
This is my code on layout.tsx of next.js app route.

"use client";

import { useEffect } from "react";
import { Download, List, Settings, Ticket, Upload } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { FinanceLayoutPropsInterface } from "@/types/page";

export default function MemberLayout({
  overview,
  posts,
  income,
  outcome,
  setting,
}: FinanceLayoutPropsInterface) {

  return (
    <Tabs defaultValue="overview">
      <TabsList className="w-full h-auto overflow-x-auto flex justify-start space-x-1 px-5 py-0 bg-white tablet:px-3">
        <TabsTrigger
          className="space-x-2 px-4 py-3 border-b-[3px] rounded-b-none border-white data-[state=active]:border-custom data-[state=active]:text-custom data-[state=active]:bg-customforeground tablet:p-2 hover:border-custom hover:text-custom hover:bg-customforeground"
          value="overview"
        >
          <List className="w-3 h-3" />
          <p className="text-sm mobile:text-xs">Übersicht</p>
        </TabsTrigger>
        <TabsTrigger
          className="space-x-2 px-4 py-3 border-b-[3px] rounded-b-none border-white data-[state=active]:border-custom data-[state=active]:text-custom data-[state=active]:bg-customforeground tablet:p-2 hover:border-custom hover:text-custom hover:bg-customforeground"
          value="posts"
        >
          <Ticket className="w-3 h-3" />
          <p className="text-sm mobile:text-xs">Beiträge</p>
        </TabsTrigger>
        <TabsTrigger
          className="space-x-2 px-4 py-3 border-b-[3px] rounded-b-none border-white data-[state=active]:border-custom data-[state=active]:text-custom data-[state=active]:bg-customforeground tablet:p-2 hover:border-custom hover:text-custom hover:bg-customforeground"
          value="income"
        >
          <Download className="w-3 h-3" />
          <p className="text-sm mobile:text-xs">Zahlungseingänge</p>
        </TabsTrigger>
        <TabsTrigger
          className="space-x-2 px-4 py-3 border-b-[3px] rounded-b-none border-white data-[state=active]:border-custom data-[state=active]:text-custom data-[state=active]:bg-customforeground tablet:p-2 hover:border-custom hover:text-custom hover:bg-customforeground"
          value="outcome"
        >
          <Upload className="w-3 h-3" />
          <p className="text-sm mobile:text-xs">Ausgaben</p>
        </TabsTrigger>
        <TabsTrigger
          className="space-x-2 px-4 py-3 border-b-[3px] rounded-b-none border-white data-[state=active]:border-custom data-[state=active]:text-custom data-[state=active]:bg-customforeground tablet:p-2 hover:border-custom hover:text-custom hover:bg-customforeground"
          value="setting"
        >
          <Settings className="w-3 h-3" />
          <p className="text-sm mobile:text-xs">Einstellungen</p>
        </TabsTrigger>
      </TabsList>
      <TabsContent value="overview">{overview}</TabsContent>
      <TabsContent value="posts">{posts}</TabsContent>
      <TabsContent value="income">{income}</TabsContent>
      <TabsContent value="outcome">{outcome}</TabsContent>
      <TabsContent value="setting">{setting}</TabsContent>
    </Tabs>
  );
}

For now, I want to navigate to the specific tab using next.js routing from the another pages but that is not work coz there aren't any route changes between tab navigation.

How to solve this problem?

[tobistudio]

I can solve this problem with my experience.

[cupid20103]

Can you explain about that?