From cfa6acb1ee7ad88cd328b236824d61b929317f29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A1zaro=20Amor=20Sevilla?=
 <lazaroesunagranpersona@gmail.com>
Date: Tue, 9 Aug 2022 21:37:10 +0200
Subject: [PATCH 1/5] Add latest version of react-router-dom to package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7089242..368c084 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "react-chartjs-2": "2.9.0",
     "react-dom": "^16.13.1",
     "react-focus-lock": "2.4.0",
-    "react-router-dom": "5.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "3.4.1",
     "react-transition-group": "4.4.1"
   },

From 030c57333b4795a6c209facbdab0542a49721832 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A1zaro=20Amor=20Sevilla?=
 <lazaroesunagranpersona@gmail.com>
Date: Sun, 14 Aug 2022 18:21:07 +0200
Subject: [PATCH 2/5] Change Switch to Routes according to router
 documentation. Modify Readme.md

---
 README.md  |  2 +-
 src/App.js | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 19477ae..ef114de 100644
--- a/README.md
+++ b/README.md
@@ -119,7 +119,7 @@ Then add it to the `routes` array:
 If you're asking where does this `/app` come from, it is from this line inside `src/App.js`, that renders the app:
 
 ```jsx
-<Route path="/app" component={Layout} />
+ <Route path="/app" element={<Layout />} />
 ```
 
 ---
diff --git a/src/App.js b/src/App.js
index 54be938..20708e5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React, { lazy } from 'react'
-import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
 import AccessibleNavigationAnnouncer from './components/AccessibleNavigationAnnouncer'
 
 const Layout = lazy(() => import('./containers/Layout'))
@@ -12,16 +12,16 @@ function App() {
     <>
       <Router>
         <AccessibleNavigationAnnouncer />
-        <Switch>
-          <Route path="/login" component={Login} />
-          <Route path="/create-account" component={CreateAccount} />
-          <Route path="/forgot-password" component={ForgotPassword} />
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route path="/create-account" element={<CreateAccount />} />
+          <Route path="/forgot-password" element={<ForgotPassword />} />
 
           {/* Place new routes over this */}
-          <Route path="/app" component={Layout} />
+          <Route path="/app" element={<Layout />} />
           {/* If you have an index page, you can remothis Redirect */}
-          <Redirect exact from="/" to="/login" />
-        </Switch>
+          <Route path="/" element={<Navigate to='/login' replace />} />
+        </Routes>
       </Router>
     </>
   )

From e6dc6ccbf38b990d4ed6d85496f5c27ec3e3ff80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A1zaro=20Amor=20Sevilla?=
 <lazaroesunagranpersona@gmail.com>
Date: Sun, 14 Aug 2022 20:10:33 +0200
Subject: [PATCH 3/5] Change component to element in index.js

---
 src/routes/index.js | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/routes/index.js b/src/routes/index.js
index f0710f5..0d412e7 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -1,4 +1,4 @@
-import { lazy } from 'react'
+import React, { lazy } from 'react'
 
 // use lazy for better code splitting, a.k.a. load faster
 const Dashboard = lazy(() => import('../pages/Dashboard'))
@@ -23,40 +23,40 @@ const Blank = lazy(() => import('../pages/Blank'))
  */
 const routes = [
   {
-    path: '/dashboard', // the url
-    component: Dashboard, // view rendered
+    path: 'dashboard', // the url
+    element: <Dashboard />, // view rendered
   },
   {
-    path: '/forms',
-    component: Forms,
+    path: 'forms',
+    element: <Forms />,
   },
   {
-    path: '/cards',
-    component: Cards,
+    path: 'cards',
+    element: <Cards />,
   },
   {
-    path: '/charts',
-    component: Charts,
+    path: 'charts',
+    element: <Charts />,
   },
   {
-    path: '/buttons',
-    component: Buttons,
+    path: 'buttons',
+    element: <Buttons />,
   },
   {
-    path: '/modals',
-    component: Modals,
+    path: 'modals',
+    element: <Modals />,
   },
   {
     path: '/tables',
-    component: Tables,
+    element: <Tables />,
   },
   {
-    path: '/404',
-    component: Page404,
+    path: '404',
+    element: <Page404 />,
   },
   {
-    path: '/blank',
-    component: Blank,
+    path: 'blank',
+    element: <Blank />,
   },
 ]
 

From 82efb4c64632b1fd339043d9f5e8cd01b9d1ddfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A1zaro=20Amor=20Sevilla?=
 <lazaroesunagranpersona@gmail.com>
Date: Sat, 20 Aug 2022 17:05:32 +0200
Subject: [PATCH 4/5] Fix sidebar active links

---
 src/components/Sidebar/SidebarContent.js | 24 +++++++++++++++---------
 src/routes/sidebar.js                    | 18 +++++++++---------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/Sidebar/SidebarContent.js b/src/components/Sidebar/SidebarContent.js
index be99bc9..69a499a 100644
--- a/src/components/Sidebar/SidebarContent.js
+++ b/src/components/Sidebar/SidebarContent.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import routes from '../../routes/sidebar'
-import { NavLink, Route } from 'react-router-dom'
+import { NavLink, Route, Routes } from 'react-router-dom'
 import * as Icons from '../../icons'
 import SidebarSubmenu from './SidebarSubmenu'
 import { Button } from '@windmill/react-ui'
@@ -11,6 +11,10 @@ function Icon({ icon, ...props }) {
 }
 
 function SidebarContent() {
+  
+  let className = 'inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200';
+  let activeClassName = className + ' text-gray-800 dark:text-gray-100'
+
   return (
     <div className="py-4 text-gray-500 dark:text-gray-400">
       <a className="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200" href="#">
@@ -25,15 +29,17 @@ function SidebarContent() {
               <NavLink
                 exact
                 to={route.path}
-                className="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
-                activeClassName="text-gray-800 dark:text-gray-100"
+                className={({ isActive }) => 
+                  isActive ? activeClassName : className
+                }
               >
-                <Route path={route.path} exact={route.exact}>
-                  <span
-                    className="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
-                    aria-hidden="true"
-                  ></span>
-                </Route>
+                <Routes>
+                  <Route path={route.path} exact={route.exact} element={<span
+                      className="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
+                      aria-hidden="true"
+                    ></span>}>
+                  </Route>
+                </Routes>
                 <Icon className="w-5 h-5" aria-hidden="true" icon={route.icon} />
                 <span className="ml-4">{route.name}</span>
               </NavLink>
diff --git a/src/routes/sidebar.js b/src/routes/sidebar.js
index d21eb5c..3219290 100644
--- a/src/routes/sidebar.js
+++ b/src/routes/sidebar.js
@@ -7,37 +7,37 @@
  */
 const routes = [
   {
-    path: '/app/dashboard', // the url
+    path: 'dashboard', // the url
     icon: 'HomeIcon', // the component being exported from icons/index.js
     name: 'Dashboard', // name that appear in Sidebar
   },
   {
-    path: '/app/forms',
+    path: 'forms',
     icon: 'FormsIcon',
     name: 'Forms',
   },
   {
-    path: '/app/cards',
+    path: 'cards',
     icon: 'CardsIcon',
     name: 'Cards',
   },
   {
-    path: '/app/charts',
+    path: 'charts',
     icon: 'ChartsIcon',
     name: 'Charts',
   },
   {
-    path: '/app/buttons',
+    path: 'buttons',
     icon: 'ButtonsIcon',
     name: 'Buttons',
   },
   {
-    path: '/app/modals',
+    path: 'modals',
     icon: 'ModalsIcon',
     name: 'Modals',
   },
   {
-    path: '/app/tables',
+    path: 'tables',
     icon: 'TablesIcon',
     name: 'Tables',
   },
@@ -59,11 +59,11 @@ const routes = [
         name: 'Forgot password',
       },
       {
-        path: '/app/404',
+        path: '404',
         name: '404',
       },
       {
-        path: '/app/blank',
+        path: 'blank',
         name: 'Blank',
       },
     ],

From 3975b97de230cfbc0a4222d804c90fe0e3143466 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A1zaro=20Amor=20Sevilla?=
 <lazaroesunagranpersona@gmail.com>
Date: Sat, 20 Aug 2022 17:19:35 +0200
Subject: [PATCH 5/5] Remove exact. Refactor Layout

---
 src/App.js                               |  4 ++--
 src/components/Sidebar/SidebarContent.js |  1 -
 src/containers/Layout.js                 | 30 +++++++++++-------------
 src/routes/index.js                      |  2 +-
 4 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/App.js b/src/App.js
index 20708e5..bdaed85 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,8 +18,8 @@ function App() {
           <Route path="/forgot-password" element={<ForgotPassword />} />
 
           {/* Place new routes over this */}
-          <Route path="/app" element={<Layout />} />
-          {/* If you have an index page, you can remothis Redirect */}
+          <Route path="/app/*" element={<Layout />} />
+          {/* If you have an index page, you can remove the following line */}
           <Route path="/" element={<Navigate to='/login' replace />} />
         </Routes>
       </Router>
diff --git a/src/components/Sidebar/SidebarContent.js b/src/components/Sidebar/SidebarContent.js
index 69a499a..805551f 100644
--- a/src/components/Sidebar/SidebarContent.js
+++ b/src/components/Sidebar/SidebarContent.js
@@ -27,7 +27,6 @@ function SidebarContent() {
           ) : (
             <li className="relative px-6 py-3" key={route.name}>
               <NavLink
-                exact
                 to={route.path}
                 className={({ isActive }) => 
                   isActive ? activeClassName : className
diff --git a/src/containers/Layout.js b/src/containers/Layout.js
index 9e2da7a..9b1c928 100644
--- a/src/containers/Layout.js
+++ b/src/containers/Layout.js
@@ -1,5 +1,5 @@
 import React, { useContext, Suspense, useEffect, lazy } from 'react'
-import { Switch, Route, Redirect, useLocation } from 'react-router-dom'
+import { Routes, Route, useLocation, Navigate } from 'react-router-dom'
 import routes from '../routes'
 
 import Sidebar from '../components/Sidebar'
@@ -7,7 +7,6 @@ import Header from '../components/Header'
 import Main from '../containers/Main'
 import ThemedSuspense from '../components/ThemedSuspense'
 import { SidebarContext } from '../context/SidebarContext'
-
 const Page404 = lazy(() => import('../pages/404'))
 
 function Layout() {
@@ -28,20 +27,19 @@ function Layout() {
         <Header />
         <Main>
           <Suspense fallback={<ThemedSuspense />}>
-            <Switch>
-              {routes.map((route, i) => {
-                return route.component ? (
-                  <Route
-                    key={i}
-                    exact={true}
-                    path={`/app${route.path}`}
-                    render={(props) => <route.component {...props} />}
-                  />
-                ) : null
-              })}
-              <Redirect exact from="/app" to="/app/dashboard" />
-              <Route component={Page404} />
-            </Switch>
+            <Routes>
+            {routes.map((route, i) => {
+                return route.element ? (
+                    <Route
+                      key={i}
+                      path={`${route.path}`}            
+                      element={route.element}
+                    />
+                  ) : 'null'
+                })}
+                <Route path="/" element={<Navigate to="dashboard" replace />} />
+                <Route path="*" element={<Page404 />} />
+            </Routes>
           </Suspense>
         </Main>
       </div>
diff --git a/src/routes/index.js b/src/routes/index.js
index 0d412e7..e5e7255 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -47,7 +47,7 @@ const routes = [
     element: <Modals />,
   },
   {
-    path: '/tables',
+    path: 'tables',
     element: <Tables />,
   },
   {