refactor: update react router to v6

Author: mrholek

package.json

@@ -36,12 +36,12 @@
     "chart.js": "^3.7.0",
     "classnames": "^2.3.1",
     "core-js": "^3.20.2",
-    "prop-types": "^15.8.0",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.2.1",
     "redux": "4.1.2",
     "simplebar-react": "^2.3.6"
   },

src/App.js

@@ -1,12 +1,10 @@
-import React, { Component } from 'react'
-import { HashRouter, Route, Switch } from 'react-router-dom'
+import React, { Component, Suspense } from 'react'
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom'
+import { CSpinner } from '@coreui/react'
 import './scss/style.scss'
 
-const loading = (
-  <div className="pt-3 text-center">
-    <div className="sk-spinner sk-spinner-pulse"></div>
-  </div>
-)
+// routes config
+import routes from './routes'
 
 // Containers
 const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
@@ -21,20 +19,30 @@ class App extends Component {
   render() {
     return (
       <HashRouter>
-        <React.Suspense fallback={loading}>
-          <Switch>
-            <Route exact path="/login" name="Login Page" render={(props) => <Login {...props} />} />
-            <Route
-              exact
-              path="/register"
-              name="Register Page"
-              render={(props) => <Register {...props} />}
-            />
-            <Route exact path="/404" name="Page 404" render={(props) => <Page404 {...props} />} />
-            <Route exact path="/500" name="Page 500" render={(props) => <Page500 {...props} />} />
-            <Route path="/" name="Home" render={(props) => <DefaultLayout {...props} />} />
-          </Switch>
-        </React.Suspense>
+        <Suspense fallback={<CSpinner color="primary" />}>
+          <Routes>
+            <Route exact path="/login" name="Login Page" element={<Login />} />
+            <Route exact path="/register" name="Register Page" render={<Register />} />
+            <Route exact path="/404" name="Page 404" element={<Page404 />} />
+            <Route exact path="/500" name="Page 500" element={<Page500 />} />
+            <Route path="/" name="Home" element={<DefaultLayout />}>
+              <Route index element={<Navigate to="/dashboard" />} />
+              {routes.map((route, idx) => {
+                return (
+                  route.component && (
+                    <Route
+                      key={idx}
+                      path={route.path}
+                      exact={route.exact}
+                      name={route.name}
+                      element={<route.component />}
+                    />
+                  )
+                )
+              })}
+            </Route>
+          </Routes>
+        </Suspense>
       </HashRouter>
     )
   }

src/components/AppContent.js

@@ -36,7 +36,7 @@ const AppHeader = () => {
         </CHeaderBrand>
         <CHeaderNav className="d-none d-md-flex me-auto">
           <CNavItem>
-            <CNavLink to="/dashboard" component={NavLink} activeClassName="active">
+            <CNavLink to="/dashboard" component={NavLink}>
               Dashboard
             </CNavLink>
           </CNavItem>

src/components/AppHeader.js

@@ -28,7 +28,6 @@ export const AppSidebarNav = ({ items }) => {
         {...(rest.to &&
           !rest.items && {
             component: NavLink,
-            activeClassName: 'active',
           })}
         key={index}
         {...rest}

src/components/AppSidebarNav.js

@@ -1,5 +1,4 @@
 import AppBreadcrumb from './AppBreadcrumb'
-import AppContent from './AppContent'
 import AppFooter from './AppFooter'
 import AppHeader from './AppHeader'
 import AppHeaderDropdown from './header/AppHeaderDropdown'
@@ -10,7 +9,6 @@ import DocsExample from './DocsExample'
 
 export {
   AppBreadcrumb,
-  AppContent,
   AppFooter,
   AppHeader,
   AppHeaderDropdown,

src/components/index.js

@@ -1,5 +1,7 @@
-import React from 'react'
-import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index'
+import React, { Suspense } from 'react'
+import { Outlet } from 'react-router-dom'
+import { CContainer, CSpinner } from '@coreui/react'
+import { AppSidebar, AppFooter, AppHeader } from '../components/index'
 
 const DefaultLayout = () => {
   return (
@@ -8,7 +10,11 @@ const DefaultLayout = () => {
       <div className="wrapper d-flex flex-column min-vh-100 bg-light">
         <AppHeader />
         <div className="body flex-grow-1 px-3">
-          <AppContent />
+          <CContainer lg>
+            <Suspense fallback={<CSpinner color="primary" />}>
+              <Outlet />
+            </Suspense>
+          </CContainer>
         </div>
         <AppFooter />
       </div>

src/layout/DefaultLayout.js

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'

src/setupTests.js

@@ -1,4 +1,4 @@
-import React, { lazy } from 'react'
+import React from 'react'
 
 import {
   CAvatar,