Feature/upgrade react router to v6

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 />} />
 ```
 
 ---

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"
   },

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} />
-          {/* If you have an index page, you can remothis Redirect */}
-          <Redirect exact from="/" to="/login" />
-        </Switch>
+          <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>
     </>
   )

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="#">
@@ -23,17 +27,18 @@ function SidebarContent() {
           ) : (
             <li className="relative px-6 py-3" key={route.name}>
               <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>

src/containers/Layout.js

@@ -1,13 +1,12 @@
 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'
 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>

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,
+    path: 'tables',
+    element: <Tables />,
   },
   {
-    path: '/404',
-    component: Page404,
+    path: '404',
+    element: <Page404 />,
   },
   {
-    path: '/blank',
-    component: Blank,
+    path: 'blank',
+    element: <Blank />,
   },
 ]
 

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',
       },
     ],