upgrade react to v18

app/src/core/nav.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ROUTES from "Constants/routes";
+import { useNavigate } from "react-router-dom";
 import {
   validateLicenseRequest,
   validateLicenseResponse,
@@ -9,7 +10,6 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
 
-    this.history = props.history;
     this.state = {
       mobileMenuActive: false,
       licenseModalActive: false,
@@ -59,13 +59,13 @@ class Nav extends React.Component {
     });
   }
 
-  toggleMenu(event) {
+  toggleMenu(_event) {
     this.setState({
       mobileMenuActive: !this.state.mobileMenuActive,
     });
   }
 
-  toggleLicenseModal(event) {
+  toggleLicenseModal(_event) {
     const previous = this.state.licenseModalActive;
 
     // Only send license request if the modal
@@ -88,7 +88,7 @@ class Nav extends React.Component {
         mobileMenuActive: false,
       },
       function () {
-        this.history.push(url);
+        this.props.navigate(url);
       }
     );
   }
@@ -249,4 +249,9 @@ class Nav extends React.Component {
   }
 }
 
-export default Nav;
+function WithNavigate(props){
+  const navigate = useNavigate();
+  return <Nav {...props} navigate={navigate} />
+}
+
+export default WithNavigate;

app/src/core/root.jsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { ConnectedRouter } from "connected-react-router";
+import { HistoryRouter } from "redux-first-history/rr6";
 import { Provider } from "react-redux";
-import Routes from "Core/routes";
+import AppRoutes from "Core/routes";
 import Nav from "./nav";
 import "./root.css";
 
@@ -12,10 +12,10 @@ class Root extends React.Component {
     return (
       <React.Fragment>
         <Provider store={store}>
-          <ConnectedRouter history={history}>
+          <HistoryRouter history={history}>
             <Nav history={history}></Nav>
-            <Routes></Routes>
-          </ConnectedRouter>
+            <AppRoutes></AppRoutes>
+          </HistoryRouter>
         </Provider>
       </React.Fragment>
     );

app/src/core/routes.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Switch, Route } from "react-router";
+import { Routes, Route } from "react-router";
 import ROUTES from "Constants/routes";
 import loadable from "@loadable/component";
 
@@ -25,19 +25,19 @@ const ContextMenu = loadable(() =>
   import(/* webpackChunkName: "ContextMenuChunk" */ "Pages/contextmenu/contextmenu")
 );
 
-class Routes extends React.Component {
-  render() {
+class AppRoutes extends React.Component {
+  render() {    
     return (
-      <Switch>
-        <Route exact path={ROUTES.WELCOME} component={Welcome}></Route>
-        <Route path={ROUTES.ABOUT} component={About}></Route>
-        <Route path={ROUTES.MOTD} component={Motd}></Route>
-        <Route path={ROUTES.LOCALIZATION} component={Localization}></Route>
-        <Route path={ROUTES.UNDOREDO} component={UndoRedo}></Route>
-        <Route path={ROUTES.CONTEXTMENU} component={ContextMenu}></Route>
-      </Switch>
+      <Routes>
+        <Route path={ROUTES.WELCOME} element={<Welcome />}></Route>
+        <Route path={ROUTES.ABOUT} element={<About />}></Route>
+        <Route path={ROUTES.MOTD} element={<Motd />}></Route>
+        <Route path={ROUTES.LOCALIZATION} element={<Localization />}></Route>
+        <Route path={ROUTES.UNDOREDO} element={<UndoRedo />}></Route>
+        <Route path={ROUTES.CONTEXTMENU} element={<ContextMenu />}></Route>
+      </Routes>
     );
   }
 }
 
-export default Routes;
+export default AppRoutes;

app/src/index.tsx

@@ -1,16 +1,17 @@
 import React, { Suspense } from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import i18n from "I18n/i18n.config";
 import { I18nextProvider } from "react-i18next";
 import Root from "Core/root";
-import store, { history } from "Redux/store/store";
+import { store, history } from "Redux/store/store";
 import "bulma/css/bulma.css";
 
-ReactDOM.render(
+const container = document.getElementById("target");
+const root = createRoot(container);
+root.render(
   <I18nextProvider i18n={i18n}>
     <Suspense fallback="loading">
       <Root store={store} history={history}></Root>
     </Suspense>
-  </I18nextProvider>,
-  document.getElementById("target")
-);
+  </I18nextProvider>
+);

app/src/redux/store/store.js

@@ -1,15 +1,43 @@
-import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
-import { createHashHistory } from "history";
-import { routerMiddleware } from "connected-react-router";
-import rootReducer from "../reducers/rootReducer";
+import {
+  combineReducers
+} from "redux";
+import {
+  configureStore,
+  getDefaultMiddleware
+} from "@reduxjs/toolkit";
+import {
+  createHashHistory
+} from "history";
+import {
+  createReduxHistoryContext
+} from "redux-first-history";
+import undoable from "easy-redux-undo";
+import homeReducer from "../components/home/homeSlice";
+import counterReducer from "../components/counter/counterSlice";
+import complexReducer from "../components/complex/complexSlice";
 
-export const history = createHashHistory();
+const {
+  routerMiddleware,
+  createReduxHistory,
+  routerReducer
+} = createReduxHistoryContext({
+  history: createHashHistory()
+});
 
-const store = configureStore({
-  reducer: rootReducer(history),
+export const store = configureStore({
+  reducer: combineReducers({
+    router: routerReducer,
+    home: homeReducer,
+    undoable: undoable(
+      combineReducers({
+        counter: counterReducer,
+        complex: complexReducer
+      })
+    )
+  }),
   middleware: [...getDefaultMiddleware({
     serializableCheck: false
-  }), routerMiddleware(history)]
+  }), routerMiddleware]
 });
 
-export default store;
+export const history = createReduxHistory(store);