Wrap Tabs component with BrowserRouter for improved routing support

scality · Dec 13, 2024 · 398f675 · 398f675
1 parent c2c0b22
commit 398f675
Showing 1 changed file with 61 additions and 58 deletions.
diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx
@@ -6,6 +6,7 @@ import React, {
   useState,
 } from 'react';
 import {
+  BrowserRouter,
   Outlet,
   Route,
   Routes,
@@ -186,65 +187,67 @@ function Tabs({
     );
   });
   return (
-    <TabsContext.Provider value={true}>
-      <TabsContainer
-        style={{ containerType: 'size' }}
-        className={['sc-tabs', className].join(' ')}
-        tabLineColor={tabLineColor}
-        separatorColor={separatorColor}
-        {...rest}
-      >
-        <ScrollableContainer>
-          {displayScroll.start && (
-            <ScrollButton
-              ref={scrollButtonStartRef}
-              direction="left"
-              onClick={handleStartScrollClick}
-            />
-          )}
-          <TabsScroller ref={tabsRef} onScroll={handleTabsScroll}>
-            <TabBar
-              onKeyDown={handleKeyDown}
-              ref={tabsListRef}
-              className="sc-tabs-bar"
-              role="tablist"
-            >
-              {tabItems}
-            </TabBar>
-          </TabsScroller>
-          {displayScroll.end && (
-            <ScrollButton
-              ref={scrollButtonEndRef}
-              direction="right"
-              onClick={handleEndScrollClick}
-            />
-          )}
-        </ScrollableContainer>
-        <Routes>
-          {filteredTabsChildren.map((tab, index) => {
-            const path = tab.props.path.split('/').pop();
-            return (
-              <Route
-                key={index}
-                path={`/${path}`}
-                element={
-                  <>
-                    <TabContent
-                      className="sc-tabs-item-content"
-                      tabContentColor={tabContentColor}
-                      withoutPadding={tab.props.withoutPadding}
-                    >
-                      {tab.props.children}
-                    </TabContent>
-                    <Outlet />
-                  </>
-                }
+    <BrowserRouter>
+      <TabsContext.Provider value={true}>
+        <TabsContainer
+          style={{ containerType: 'size' }}
+          className={['sc-tabs', className].join(' ')}
+          tabLineColor={tabLineColor}
+          separatorColor={separatorColor}
+          {...rest}
+        >
+          <ScrollableContainer>
+            {displayScroll.start && (
+              <ScrollButton
+                ref={scrollButtonStartRef}
+                direction="left"
+                onClick={handleStartScrollClick}
+              />
+            )}
+            <TabsScroller ref={tabsRef} onScroll={handleTabsScroll}>
+              <TabBar
+                onKeyDown={handleKeyDown}
+                ref={tabsListRef}
+                className="sc-tabs-bar"
+                role="tablist"
+              >
+                {tabItems}
+              </TabBar>
+            </TabsScroller>
+            {displayScroll.end && (
+              <ScrollButton
+                ref={scrollButtonEndRef}
+                direction="right"
+                onClick={handleEndScrollClick}
               />
-            );
-          })}
-        </Routes>
-      </TabsContainer>
-    </TabsContext.Provider>
+            )}
+          </ScrollableContainer>
+          <Routes>
+            {filteredTabsChildren.map((tab, index) => {
+              const path = tab.props.path.split('/').pop();
+              return (
+                <Route
+                  key={index}
+                  path={`/${path}`}
+                  element={
+                    <>
+                      <TabContent
+                        className="sc-tabs-item-content"
+                        tabContentColor={tabContentColor}
+                        withoutPadding={tab.props.withoutPadding}
+                      >
+                        {tab.props.children}
+                      </TabContent>
+                      <Outlet />
+                    </>
+                  }
+                />
+              );
+            })}
+          </Routes>
+        </TabsContainer>
+      </TabsContext.Provider>
+    </BrowserRouter>
   );
 }