From b89ed28b81e1160dad4f22f6da16a2965a5d2563 Mon Sep 17 00:00:00 2001
From: SuyashOP-2 <suyashsshirtar2@gmail.com>
Date: Fri, 22 Dec 2023 09:50:21 +0530
Subject: [PATCH] Upgrade-react-router

---
 package.json               |  2 +-
 src/index.js               | 32 ++++++++++++++++----------------
 src/layouts/admin/index.js |  8 ++++----
 src/layouts/auth/index.js  | 12 ++++--------
 src/layouts/rtl/index.js   |  8 ++++----
 5 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index 47dce8af..a6f33d4a 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "react-dropzone": "^12.0.4",
     "react-icons": "^4.3.1",
     "react-is": "^18.0.0",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.0.0",
     "react-scripts": "5.0.0",
     "react-table": "^7.7.0",
     "stylis": "^4.1.1",
diff --git a/src/index.js b/src/index.js
index a12df8a1..44807dc7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'assets/css/App.css';
-import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
+import { Routes, Route, Navigate, BrowserRouter } from 'react-router-dom';
 import AuthLayout from 'layouts/auth';
 import AdminLayout from 'layouts/admin';
 import RtlLayout from 'layouts/rtl';
@@ -10,19 +10,19 @@ import theme from 'theme/theme';
 import { ThemeEditorProvider } from '@hypertheme-editor/chakra-ui';
 
 ReactDOM.render(
-	<ChakraProvider theme={theme}>
-		<React.StrictMode>
-			<ThemeEditorProvider>
-				<HashRouter>
-					<Switch>
-						<Route path={`/auth`} component={AuthLayout} />
-						<Route path={`/admin`} component={AdminLayout} />
-						<Route path={`/rtl`} component={RtlLayout} />
-						<Redirect from='/' to='/admin' />
-					</Switch>
-				</HashRouter>
-			</ThemeEditorProvider>
-		</React.StrictMode>
-	</ChakraProvider>,
-	document.getElementById('root')
+  <ChakraProvider theme={theme}>
+    <React.StrictMode>
+      <ThemeEditorProvider>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/auth/*" element={<AuthLayout />} />
+            <Route path="/admin/*" element={<AdminLayout />} />
+            <Route path="/rtl/*" element={<RtlLayout />} />
+            <Route path="/" element={<Navigate to="/admin" />} />
+          </Routes>
+        </BrowserRouter>
+      </ThemeEditorProvider>
+    </React.StrictMode>
+  </ChakraProvider>,
+  document.getElementById('root')
 );
diff --git a/src/layouts/admin/index.js b/src/layouts/admin/index.js
index d5b0ad5f..96d38939 100644
--- a/src/layouts/admin/index.js
+++ b/src/layouts/admin/index.js
@@ -6,7 +6,7 @@ import Navbar from 'components/navbar/NavbarAdmin.js';
 import Sidebar from 'components/sidebar/Sidebar.js';
 import { SidebarContext } from 'contexts/SidebarContext';
 import React, { useState } from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import routes from 'routes.js';
 
 // Custom Chakra theme
@@ -138,10 +138,10 @@ export default function Dashboard(props) {
 
 						{getRoute() ? (
 							<Box mx='auto' p={{ base: '20px', md: '30px' }} pe='20px' minH='100vh' pt='50px'>
-								<Switch>
+								<Routes>
 									{getRoutes(routes)}
-									<Redirect from='/' to='/admin/default' />
-								</Switch>
+									<Route path="/" element={<Navigate to="/admin/default" />} />
+								</Routes>
 							</Box>
 						) : null}
 						<Box>
diff --git a/src/layouts/auth/index.js b/src/layouts/auth/index.js
index b4722dc7..3d735be9 100644
--- a/src/layouts/auth/index.js
+++ b/src/layouts/auth/index.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Redirect, Route, Switch } from "react-router-dom";
+import { Navigate, Route, Routes } from "react-router-dom";
 import routes from "routes.js";
 
 // Chakra imports
@@ -59,14 +59,10 @@ export default function Auth() {
           transitionTimingFunction='linear, linear, ease'>
           {getRoute() ? (
             <Box mx='auto' minH='100vh'>
-              <Switch>
+              <Routes>
                 {getRoutes(routes)}
-                <Redirect
-                  from='/auth'
-                  to='/auth/sign-in/default
-                  '
-                />
-              </Switch>
+                <Route path="/auth" element={<Navigate to="/auth/sign-in/default" />} />
+              </Routes>
             </Box>
           ) : null}
         </Box>
diff --git a/src/layouts/rtl/index.js b/src/layouts/rtl/index.js
index b8506898..3bd50894 100644
--- a/src/layouts/rtl/index.js
+++ b/src/layouts/rtl/index.js
@@ -7,7 +7,7 @@ import Sidebar from "components/sidebar/Sidebar.js";
 import { RtlProvider } from "components/rtlProvider/RtlProvider.js";
 import { SidebarContext } from "contexts/SidebarContext";
 import React, { useState } from "react";
-import { Redirect, Route, Switch } from "react-router-dom";
+import { Navigate , Route, Routes } from "react-router-dom";
 import routes from "routes.js";
 
 // Custom Chakra theme
@@ -154,10 +154,10 @@ export default function Dashboard(props) {
               pe='20px'
               minH='100vh'
               pt='50px'>
-              <Switch>
+              <Routes>
                 {getRoutes(routes)}
-                <Redirect from='/' to='/rtl/default' />
-              </Switch>
+                <Route path="/" element={<Navigate to="/rtl/default" />} />
+              </Routes>
             </Box>
           ) : null}
           <Box>