put Tab content under route to avoid multiple render

scality · Jun 25, 2024 · a84e293 · a84e293
1 parent bf0df90
commit a84e293
Showing 1 changed file with 15 additions and 15 deletions.
diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx
@@ -219,30 +219,30 @@ function Tabs({
           )}
         </ScrollableContainer>
         {filteredTabsChildren.map((tab, index) => (
-          <TabContent
-            className="sc-tabs-item-content"
-            tabContentColor={tabContentColor}
-            withoutPadding={tab.props.withoutPadding}
+          <Route
+            exact={tab.props.exact}
+            sensitive={tab.props.sensitive}
+            strict={tab.props.strict}
+            path={
+              tab.props.path.startsWith('/')
+                ? tab.props.path
+                : url + '/' + tab.props.path
+            }
             key={index}
           >
-            <Route
-              exact={tab.props.exact}
-              sensitive={tab.props.sensitive}
-              strict={tab.props.strict}
-              path={
-                tab.props.path.startsWith('/')
-                  ? tab.props.path
-                  : url + '/' + tab.props.path
-              }
+            <TabContent
+              className="sc-tabs-item-content"
+              tabContentColor={tabContentColor}
+              withoutPadding={tab.props.withoutPadding}
             >
               {!tab.props.query ||
               (tab.props.query && matchQuery(tab.props.query)) ? (
                 tab.props.children
               ) : (
                 <></>
               )}
-            </Route>
-          </TabContent>
+            </TabContent>
+          </Route>
         ))}
       </TabsContainer>
     </TabsContext.Provider>