Merge pull request #364 from lbz-life/update-react-router-dom-6.2.1

Update react router dom 6.2.1

Author: mrholek

package.json

@@ -45,7 +45,7 @@
     "react-app-polyfill": "^2.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,5 +1,5 @@
-import React, { Component } from 'react'
-import { HashRouter, Route, Switch } from 'react-router-dom'
+import React, { Component, Suspense } from 'react'
+import { HashRouter, Route, Routes } from 'react-router-dom'
 import './scss/style.scss'
 
 const loading = (
@@ -21,20 +21,15 @@ 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={loading}>
+          <Routes>
+            <Route exact path="/login" name="Login Page" element={<Login />} />
+            <Route exact path="/register" name="Register Page" element={<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 />} />
+          </Routes>
+        </Suspense>
       </HashRouter>
     )
   }

src/components/AppContent.js

@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react'
-import { Redirect, Route, Switch } from 'react-router-dom'
+import { Navigate, Route, Routes } from 'react-router-dom'
 import { CContainer, CSpinner } from '@coreui/react'
 
 // routes config
@@ -9,26 +9,22 @@ const AppContent = () => {
   return (
     <CContainer lg>
       <Suspense fallback={<CSpinner color="primary" />}>
-        <Switch>
+        <Routes>
           {routes.map((route, idx) => {
             return (
-              route.component && (
+              route.element && (
                 <Route
                   key={idx}
                   path={route.path}
                   exact={route.exact}
                   name={route.name}
-                  render={(props) => (
-                    <>
-                      <route.component {...props} />
-                    </>
-                  )}
+                  element={<route.element />}
                 />
               )
             )
           })}
-          <Redirect from="/" to="/dashboard" />
-        </Switch>
+          <Route path="/" element={<Navigate to="dashboard" replace />} />
+        </Routes>
       </Suspense>
     </CContainer>
   )

src/components/AppHeader.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/AppSidebarNav.js

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

src/routes.js

@@ -52,49 +52,49 @@ const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
 
 const routes = [
   { path: '/', exact: true, name: 'Home' },
-  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
-  { path: '/theme', name: 'Theme', component: Colors, exact: true },
-  { path: '/theme/colors', name: 'Colors', component: Colors },
-  { path: '/theme/typography', name: 'Typography', component: Typography },
-  { path: '/base', name: 'Base', component: Cards, exact: true },
-  { path: '/base/accordion', name: 'Accordion', component: Accordion },
-  { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
-  { path: '/base/cards', name: 'Cards', component: Cards },
-  { path: '/base/carousels', name: 'Carousel', component: Carousels },
-  { path: '/base/collapses', name: 'Collapse', component: Collapses },
-  { path: '/base/list-groups', name: 'List Groups', component: ListGroups },
-  { path: '/base/navs', name: 'Navs', component: Navs },
-  { path: '/base/paginations', name: 'Paginations', component: Paginations },
-  { path: '/base/placeholders', name: 'Placeholders', component: Placeholders },
-  { path: '/base/popovers', name: 'Popovers', component: Popovers },
-  { path: '/base/progress', name: 'Progress', component: Progress },
-  { path: '/base/spinners', name: 'Spinners', component: Spinners },
-  { path: '/base/tables', name: 'Tables', component: Tables },
-  { path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
-  { path: '/buttons', name: 'Buttons', component: Buttons, exact: true },
-  { path: '/buttons/buttons', name: 'Buttons', component: Buttons },
-  { path: '/buttons/dropdowns', name: 'Dropdowns', component: Dropdowns },
-  { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
-  { path: '/charts', name: 'Charts', component: Charts },
-  { path: '/forms', name: 'Forms', component: FormControl, exact: true },
-  { path: '/forms/form-control', name: 'Form Control', component: FormControl },
-  { path: '/forms/select', name: 'Select', component: Select },
-  { path: '/forms/checks-radios', name: 'Checks & Radios', component: ChecksRadios },
-  { path: '/forms/range', name: 'Range', component: Range },
-  { path: '/forms/input-group', name: 'Input Group', component: InputGroup },
-  { path: '/forms/floating-labels', name: 'Floating Labels', component: FloatingLabels },
-  { path: '/forms/layout', name: 'Layout', component: Layout },
-  { path: '/forms/validation', name: 'Validation', component: Validation },
-  { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
-  { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
-  { path: '/icons/flags', name: 'Flags', component: Flags },
-  { path: '/icons/brands', name: 'Brands', component: Brands },
-  { path: '/notifications', name: 'Notifications', component: Alerts, exact: true },
-  { path: '/notifications/alerts', name: 'Alerts', component: Alerts },
-  { path: '/notifications/badges', name: 'Badges', component: Badges },
-  { path: '/notifications/modals', name: 'Modals', component: Modals },
-  { path: '/notifications/toasts', name: 'Toasts', component: Toasts },
-  { path: '/widgets', name: 'Widgets', component: Widgets },
+  { path: '/dashboard', name: 'Dashboard', element: Dashboard },
+  { path: '/theme', name: 'Theme', element: Colors, exact: true },
+  { path: '/theme/colors', name: 'Colors', element: Colors },
+  { path: '/theme/typography', name: 'Typography', element: Typography },
+  { path: '/base', name: 'Base', element: Cards, exact: true },
+  { path: '/base/accordion', name: 'Accordion', element: Accordion },
+  { path: '/base/breadcrumbs', name: 'Breadcrumbs', element: Breadcrumbs },
+  { path: '/base/cards', name: 'Cards', element: Cards },
+  { path: '/base/carousels', name: 'Carousel', element: Carousels },
+  { path: '/base/collapses', name: 'Collapse', element: Collapses },
+  { path: '/base/list-groups', name: 'List Groups', element: ListGroups },
+  { path: '/base/navs', name: 'Navs', element: Navs },
+  { path: '/base/paginations', name: 'Paginations', element: Paginations },
+  { path: '/base/placeholders', name: 'Placeholders', element: Placeholders },
+  { path: '/base/popovers', name: 'Popovers', element: Popovers },
+  { path: '/base/progress', name: 'Progress', element: Progress },
+  { path: '/base/spinners', name: 'Spinners', element: Spinners },
+  { path: '/base/tables', name: 'Tables', element: Tables },
+  { path: '/base/tooltips', name: 'Tooltips', element: Tooltips },
+  { path: '/buttons', name: 'Buttons', element: Buttons, exact: true },
+  { path: '/buttons/buttons', name: 'Buttons', element: Buttons },
+  { path: '/buttons/dropdowns', name: 'Dropdowns', element: Dropdowns },
+  { path: '/buttons/button-groups', name: 'Button Groups', element: ButtonGroups },
+  { path: '/charts', name: 'Charts', element: Charts },
+  { path: '/forms', name: 'Forms', element: FormControl, exact: true },
+  { path: '/forms/form-control', name: 'Form Control', element: FormControl },
+  { path: '/forms/select', name: 'Select', element: Select },
+  { path: '/forms/checks-radios', name: 'Checks & Radios', element: ChecksRadios },
+  { path: '/forms/range', name: 'Range', element: Range },
+  { path: '/forms/input-group', name: 'Input Group', element: InputGroup },
+  { path: '/forms/floating-labels', name: 'Floating Labels', element: FloatingLabels },
+  { path: '/forms/layout', name: 'Layout', element: Layout },
+  { path: '/forms/validation', name: 'Validation', element: Validation },
+  { path: '/icons', exact: true, name: 'Icons', element: CoreUIIcons },
+  { path: '/icons/coreui-icons', name: 'CoreUI Icons', element: CoreUIIcons },
+  { path: '/icons/flags', name: 'Flags', element: Flags },
+  { path: '/icons/brands', name: 'Brands', element: Brands },
+  { path: '/notifications', name: 'Notifications', element: Alerts, exact: true },
+  { path: '/notifications/alerts', name: 'Alerts', element: Alerts },
+  { path: '/notifications/badges', name: 'Badges', element: Badges },
+  { path: '/notifications/modals', name: 'Modals', element: Modals },
+  { path: '/notifications/toasts', name: 'Toasts', element: Toasts },
+  { path: '/widgets', name: 'Widgets', element: Widgets },
 ]
 
 export default routes