feat: upgrade to react-router v6

src/App.js

@@ -1,5 +1,5 @@
 import { useReducer, Suspense, lazy } from 'react';
-import { Switch, Route, Link } from "react-router-dom";
+import { Routes , Route, Link } from "react-router-dom";
 
 import { INIT_STATE, reducer, AppContext } from './utils/state';
 
@@ -34,12 +34,12 @@ function App() {
         </Link>
 
         <Suspense fallback={<Loading />}>
-          <Switch>
+          <Routes>
             <Route path="/add" component={LazyAdd} />
             <Route path="/view/:id" component={LazyView} />
             <Route path="/edit/:id" component={LazyEdit} />
             <Route exact path="/" component={LazyHome} />
-          </Switch>
+          </Routes>
         </Suspense>
 
       </div>

src/components/Add/index.js

@@ -1,6 +1,6 @@
 
 import { useReducer, useContext } from 'react';
-import { useHistory, Link } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 
 import { BASE_URL } from './../../utils/api';
 import { AppContext } from './../../utils/state';
@@ -25,7 +25,7 @@ const reducer = (state, action) => {
 const Add = () => {
   const { dispatch } = useContext(AppContext);  // Get dispatch() from global context
   const year = new Date().getFullYear();        // "Calculate" current year
-  const history = useHistory();                 // Force routing from JS code without a component
+  const history = useNavigate();                 // Force routing from JS code without a component
 
   // Local state
   const formState = {

src/components/Edit/index.js

@@ -1,7 +1,7 @@
 
 
 import { useEffect, useState, useContext } from 'react';
-import { useParams, Link, useHistory } from 'react-router-dom';
+import { useParams, Link, useNavigate } from 'react-router-dom';
 
 import { BASE_URL, getData } from './../../utils/api';
 import { AppContext } from './../../utils/state';
@@ -16,7 +16,7 @@ const Edit = () => {
 
   const { dispatch } = useContext(AppContext);  // Get dispatch() from global context
   const year = new Date().getFullYear();        // "Calculate" current year
-  const history = useHistory();                 // Force routing from JS code without a component
+  const history = useNavigate();                 // Force routing from JS code without a component
   const { id } = useParams();                   // get the "id" paramter from the routing
   const [movie, setMovie] = useState(state);