From b59aee00e62999a73ea335be4068228eeee62d08 Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Tue, 7 Jan 2025 12:06:22 +0000
Subject: [PATCH] Use Link component from context provider

---
 app/scripts/components/exploration/container.tsx | 9 ++++-----
 app/scripts/main.tsx                             | 4 +++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx
index 2faddaeac..e8704e636 100644
--- a/app/scripts/components/exploration/container.tsx
+++ b/app/scripts/components/exploration/container.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { TourProvider } from '@reactour/tour';
-import { Link } from 'react-router-dom';
 import { DevTools } from 'jotai-devtools';
 import { useAtom, useSetAtom } from 'jotai';
 import { PopoverTourComponent, TourManager } from './tour-manager';
@@ -16,6 +15,7 @@ import { PageMainContent } from '$styles/page';
 import { LayoutProps } from '$components/common/layout-root';
 import PageHero from '$components/common/page-hero';
 import { DATASETS_PATH, EXPLORATION_PATH } from '$utils/routes';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 /**
  * @VEDA2-REFACTOR-WORK
@@ -33,6 +33,8 @@ const tourProviderStyles = {
 };
 
 export default function ExplorationAndAnalysisContainer() {
+  const { Link } = useVedaUI();
+
   const setExternalDatasets = useSetAtom(externalDatasetsAtom);
   setExternalDatasets(allExploreDatasets);
   const [timelineDatasets, setTimelineDatasets] = useTimelineDatasetAtom();
@@ -82,10 +84,7 @@ export default function ExplorationAndAnalysisContainer() {
                 This tool allows the exploration and analysis of time-series
                 datasets in raster format. For a comprehensive list of available
                 datasets, please visit the{' '}
-                <Link to={DATASETS_PATH}>
-                  Data Catalog
-                </Link>
-                .
+                <Link to={DATASETS_PATH}>Data Catalog</Link>.
               </p>
             </>
           }
diff --git a/app/scripts/main.tsx b/app/scripts/main.tsx
index 1571e8b00..8acaa7751 100644
--- a/app/scripts/main.tsx
+++ b/app/scripts/main.tsx
@@ -70,7 +70,9 @@ const composingComponents = [
         envApiRasterEndpoint: process.env.API_RASTER_ENDPOINT ?? '',
         navigation: {
           LinkComponent: Link,
-          linkPropName: 'to'
+          linkProps: {
+            pathAttributeKeyName: 'to'
+          }
         }
       }}
     >