ud

src/components/layout/RowAccordion/index.tsx

@@ -45,8 +45,8 @@ export default function RowAccordion({ data, placement='bottom' }: Props) {
         }
     }, [isInView]);
 
-    const getToPath = (link: { text: string; path: string }) => { 
-        return link.path.includes("{id}") ? link.path.replace("{id}", link.text) : link.path;
+    const getToPath = (link: { text: string; path: string }, index: number) => { 
+        return link.path.includes("{id}") ? link.path.replace("{id}", index.toString()) : link.path;
      }
 
     return (
@@ -98,8 +98,8 @@ export default function RowAccordion({ data, placement='bottom' }: Props) {
                                         )}
                                         {item.links && (
                                             <div className={styles.contentItemLinks}>
-                                                {item.links?.map((link) => (
-                                                    <Link key={link.text} to={getToPath(link)}>{link.text}</Link>
+                                                {item.links?.map((link, index) => (
+                                                    <Link key={link.text} to={getToPath(link, index)}>{link.text}</Link>
                                                 ))}
                                             </div>
                                         )}

src/components/layout/SwiperCardSection/index.tsx

@@ -33,14 +33,14 @@ export default function SwiperCardSection({ data, disableHover=false  }: { data:
 
     useEffect(() => {
         if (hashId && data.cardItems && swiperRef) {
-            const index = data.cardItems.findIndex((item) => item.title === hashId);
+            const index = data.cardItems.findIndex((item, index) => index == parseInt(hashId));
             if (index !== -1) {
                 swiperRef.slideTo(index, 0);
             }
         }
     }, [hashId, data.cardItems, swiperRef])
     return (
-        <section className={styles.swiperCardSection} id={data.cardItems[activeIndex]?.title} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
+        <section className={styles.swiperCardSection} id={location.key + hashId} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
             <SectionTitle title={data.title} />
             <div className={styles.carouselWrapper} >
                 {activeIndex > 0 && (

src/components/layout/TopTabsSection/TopTabs.tsx

@@ -104,7 +104,6 @@ export default function TopTabs({ data, activeIndex, setActiveIndex, className }
 
 
     useEffect(() => {
-        console.log('locale', locale);
         updateIndicatorPosition();
     }, [locale]);
 

src/components/layout/TopTabsSection/index.tsx

@@ -36,10 +36,9 @@ export default function TopTabsSection({ data, className }: { data: Data, classN
     const hash = location.hash;
     const hashId = decodeURIComponent(hash.replace('#', ''));
     const [activeIndex, setActiveIndex] = useState(0);
-
     useEffect(() => {
         if (hashId && data.tabItems) {
-            const index = data.tabItems.findIndex((item) => item.tabName === hashId);
+            const index = data.tabItems.findIndex((item, index) => index === parseInt(hashId));
             if (index !== -1) {
                 setActiveIndex(index);
             }
@@ -49,10 +48,10 @@ export default function TopTabsSection({ data, className }: { data: Data, classN
     const sideSlides = sideImageToSlides(data.tabItems[activeIndex]?.sideImage);
 
     return (
-        <section className={`${styles.topTabsSection} ${className}`} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
+        <section id={location.key + hashId} className={`${styles.topTabsSection} ${className}`} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
             <div aria-hidden="true">
-                {data.tabItems.map((item) => (
-                    <div key={item.tabName} id={item.tabName} style={{ height: 0, overflow: "hidden" }} />
+                {data.tabItems.map((item,index) => (
+                    <div key={item.tabName} style={{ height: 0, overflow: "hidden" }} />
                 ))}
             </div>
             <TopTabs data={data} activeIndex={activeIndex} setActiveIndex={setActiveIndex} />

src/hooks/useHashScroll.ts

@@ -1,13 +1,16 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useEffect, useRef } from "react";
+import { useLocation, useNavigationType } from "react-router-dom";
 import { scrollToWithLenis } from "@/utils/lenis";
 
 const useHashScroll = () => {
   const location = useLocation();
+  const navType = useNavigationType(); // POP / PUSH / REPLACE
 
   useEffect(() => {
     if (!location.hash) {
-      scrollToWithLenis(0, { immediate: true });
+      if(navType === 'PUSH') {
+        scrollToWithLenis(0, { immediate: false });
+      }
       return;
     }
 
@@ -15,9 +18,10 @@ const useHashScroll = () => {
     let attempts = 0;
     const maxAttempts = 120;
     const targetId = decodeURIComponent(location.hash.slice(1));
-
     const tryScrollToHash = () => {
-      const element = targetId ? document.getElementById(targetId) : null;
+      const element = targetId ? document.getElementById(location.key + targetId) : null;
+      console.log('location.key + id', location.key + targetId)
+      console.log('element', element)
       if (element) {
         const header = document.querySelector("header");
         const headerHeight = header?.getBoundingClientRect().height ?? 7.5 * 16;
@@ -34,9 +38,11 @@ const useHashScroll = () => {
       }
     };
 
+    setTimeout(() => {
       rafId = window.requestAnimationFrame(tryScrollToHash);
+    },50)
     return () => window.cancelAnimationFrame(rafId);
-  }, [location.pathname, location.hash]);
+  }, [location.pathname, location.hash, navType]);
 };
 
 export default useHashScroll;

src/layouts/MainLayout.tsx

@@ -10,7 +10,9 @@ export default function MainLayout() {
         <div className="layout">
             <Header />
             <main className="container">
-                <KeepAliveRouteOutlet />
+                <KeepAliveRouteOutlet
+                    exclude={[/^\/business\/base-group(?:\?.*)?$/, /^\/business\/commercial-group(.*)/]}
+                />
             </main>
             <Footer />
         </div>

src/pages/About/overview.tsx

@@ -13,9 +13,9 @@ export default function About() {
     const banner = overview?.banner;
     const section1Data = overview?.section1Data?.items ?? [];
 
-    const getLinkPath = (item: any) => {
+    const getLinkPath = (item: any, index: number) => {
         if(item.path.includes("{id}")) {
-            return item.path.replace("{id}", item.label);
+            return item.path.replace("{id}", index.toString());
         }
         return item.path;
     }
@@ -43,9 +43,9 @@ export default function About() {
                                 <h2 className={styles.title}>{item.title}</h2>
                                 <p className={styles.desc}>{item.content}</p>
                                 <div className={styles.links}>
-                                    {item.links?.map((link: { label: string; path: string }) => (
+                                    {item.links?.map((link: { label: string; path: string }, index: number) => (
                                         <span key={link.label}>
-                                            <Link to={getLinkPath(link)}>{link.label}</Link>
+                                            <Link to={getLinkPath(link, index)}>{link.label}</Link>
                                         </span>
                                     ))}
                                 </div>

src/pages/Business/InvestGroup.tsx

@@ -30,7 +30,7 @@ export default function InvestGroup() {
             {section1Data && <ParagraphSection data={section1Data} />}
 
             {section2Data && (
-                <section className={styles.investGroup} id={section2Data.title} style={{
+                <section className={styles.investGroup} id={"0"} style={{
                     backgroundImage: `url(${section2Data.backgroundImage})`
                 }}>
                     <div className={styles.investGroupInner}>
@@ -52,7 +52,7 @@ export default function InvestGroup() {
             )}
 
             {section3Data && (
-                <section className={styles.equityInvestment} id={section3Data.title}
+                <section className={styles.equityInvestment} id={"1"}
                     style={{
                         backgroundImage: `url(${section3Data.backgroundImage})`
                     }}
@@ -76,7 +76,7 @@ export default function InvestGroup() {
             )}
 
             {section4Data && (
-                <div id={section4Data.title}>
+                <div id={"2"}>
                     <Section
                         background={section4Data.backgroundImage}
                         maskBackground="rgba(20,53,92,0.1)"