Revert/react router dom to v5 (#337)

* revert react-router-dom to v5
* update version

Author: KaranAtTeamForm

lib/components/SideNav/SideNav.stories.js

@@ -5,10 +5,11 @@ import {
   BrowserRouter as Router,
   Route,
   Link,
-  Routes,
-  useParams,
-  useMatch,
-  Navigate
+  useLocation,
+  matchPath,
+  Switch,
+  Redirect,
+  useParams
 } from "react-router-dom";
 import { H5, P } from "../Typography";
 import Box from "../Box";
@@ -62,48 +63,46 @@ const PageCard = ({ children }) => {
 };
 
 const SideBarWithConfig = () => {
-  const isHome = useMatch("/");
-  const isProfile = useMatch("/profile");
-  const isSearch = useMatch("/search");
+  const location = useLocation();
 
   const items = [
     {
       iconName: "building",
       name: "Home",
       component: makeLinkComponent("/"),
       actionType: "link",
-      isActive: !!isHome
+      isActive: matchPath(location.pathname, { path: "/", exact: true })
     },
     {
       iconName: "user",
       name: "My profile",
       component: makeLinkComponent("/profile"),
       actionType: "link",
-      isActive: !!isProfile
+      isActive: matchPath(location.pathname, { path: "/profile" })
     },
     {
       iconName: "id-card",
       name: "Search Page",
       component: makeLinkComponent("/search"),
       actionType: "link",
-      isActive: isSearch
+      isActive: matchPath(location.pathname, { path: "/search" })
     },
     {
       iconName: "snowflake",
       name: "Filter",
-      hide: !isSearch, // Specify hide if you want to hide this item
+      hide: !matchPath(location.pathname, { path: "/search" }), // Specify hide if you want to hide this item
       component: makePanelComponent("Filter"),
       actionType: "component", // Use 'component' for a component
-      pageSpecific: isSearch,
+      pageSpecific: matchPath(location.pathname, { path: "/search" }),
       isExpandedByDefault: true
     },
     {
       iconName: "sun",
       name: "People",
-      hide: !isProfile, // Specify hide if you want to hide this item
+      hide: !matchPath(location.pathname, { path: "/profile" }), // Specify hide if you want to hide this item
       component: makePanelComponent("People"),
       actionType: "component", // Use 'component' for a component
-      pageSpecific: isProfile,
+      pageSpecific: matchPath(location.pathname, { path: "/profile" }),
       isExpandedByDefault: true
     },
     {
@@ -166,34 +165,24 @@ const SideBarWithConfig = () => {
   return (
     <Flex>
       <SideNav items={items} sideNavHeight="500px" />
-      <Routes>
-        <Route
-          path="/"
-          element={
-            <PageCard>
-              <div>Home</div>
-            </PageCard>
-          }
-        />
-        <Route
-          path="/profile"
-          element={
-            <PageCard>
-              <div>Profile route</div>
-            </PageCard>
-          }
-        />
-        <Route
-          path="/teams/:teamId"
-          element={
-            <PageCard>
-              <Teams />
-            </PageCard>
-          }
-        />
-
-        <Route path="/iframe.html" element={<Navigate to="/" replace />} />
-      </Routes>
+      <Switch>
+        <Route exact path="/">
+          <PageCard>
+            <div>Home</div>
+          </PageCard>
+        </Route>
+        <Route path="/profile">
+          <PageCard>
+            <div>Profile route</div>
+          </PageCard>
+        </Route>
+        <Route path="/teams/:teamId">
+          <PageCard>
+            <Teams />
+          </PageCard>
+        </Route>
+        <Redirect from="/iframe.html" to="/" />
+      </Switch>
     </Flex>
   );
 };

lib/components/StyledLink/StyledLink.stories.js

@@ -3,7 +3,7 @@ import StyledLink from ".";
 import Box from "../Box";
 import Flex from "../Flex";
 import Spacer from "../Spacer";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 
 export default {
   title: "Components/StyledLink",
@@ -64,19 +64,13 @@ export const reactLink = () => (
         {route.label}
       </StyledLink>
     ))}
-    <Routes>
+    <Switch>
       {routes.map((route) => (
-        <Route
-          key={route.path}
-          path={route.path}
-          element={
-            <div style={{ padding: "100px" }}>
-              ROUTE RENDERED: {route.label}
-            </div>
-          }
-        />
+        <Route key={route.path} path={route.path} exact={route.exact}>
+          <div style={{ padding: "100px" }}>ROUTE RENDERED: {route.label}</div>
+        </Route>
       ))}
-    </Routes>
+    </Switch>
   </BrowserRouter>
 );
 reactLink.storyName = "Using react-router-dom";

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "engines": {
     "node": "20.12.2"
   },
@@ -66,7 +66,7 @@
     "react-intersection-observer": "^9.4.3",
     "react-moment-proptypes": "^1.8.1",
     "react-number-format": "^5.3.0",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^5.3.4",
     "react-select": "^5.7.4",
     "styled-system": "^5.1.5"
   },