Updated with changes from original code base, fully migrated to react-router-dom-v5-compat

packages/web/src/App.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Layout } from "antd";
 import "./App.css";
-import { Switch } from "react-router-dom";
 import routes from "./routes";
 import { CommanderDetails } from "./pages/commanders/commanderDetails";
 import { CommandersList } from "./pages/commanders/commandersList";
@@ -26,7 +25,7 @@ import UserProfile from "./pages/profile";
 import RecentMatches from "./pages/recent-matches/recent-matches";
 import Regions from "./pages/about/regions";
 import PlayersPage from "./pages/players";
-import { CompatRoute, CompatRouter } from "react-router-dom-v5-compat";
+import { Routes, Route, CompatRouter } from "react-router-dom-v5-compat";
 
 const { Content } = Layout;
 
@@ -38,71 +37,30 @@ const App: React.FC = () => {
         <Content>
           <ErrorBoundary>
             <CompatRouter>
-              <Switch>
-                <CompatRoute path={"/"} exact={true}>
-                  <MainHome />
-                </CompatRoute>
-                <CompatRoute path={routes.fullStatsOldDetails()}>
-                  <OldStats />
-                </CompatRoute>
-                <CompatRoute path={routes.mapStats()}>
-                  <MapStats />
-                </CompatRoute>
-                <CompatRoute path={routes.statsBase()}>
-                  <CustomStats />
-                </CompatRoute>
-                <CompatRoute path={routes.playerCardWithId()}>
-                  <PlayerCard />
-                </CompatRoute>
-                <CompatRoute path={routes.playerCardBase()}>
-                  <PlayersPage />
-                </CompatRoute>
-                <CompatRoute path={routes.leaderboardsBase()}>
-                  <Leaderboards />
-                </CompatRoute>
-                <CompatRoute path={routes.commanderByID()}>
-                  <CommanderDetails />
-                </CompatRoute>
-                <CompatRoute path={routes.commanderList()}>
-                  <CommandersList />
-                </CompatRoute>
-                <CompatRoute path={routes.commanderBase()}>
-                  <RacePicker />
-                </CompatRoute>
-                <CompatRoute path={routes.desktopAppBase()}>
-                  <DesktopApp />
-                </CompatRoute>
-                <CompatRoute path={routes.liveMatchesBase()}>
-                  <LiveMatches />
-                </CompatRoute>
-                <CompatRoute path={routes.regionsBase()}>
-                  <Regions />
-                </CompatRoute>
-                <CompatRoute path={routes.aboutBase()}>
-                  <About />
-                </CompatRoute>
-                <CompatRoute path={routes.bulletinsBase()}>
-                  <BulletinList />
-                </CompatRoute>
-                <CompatRoute path={routes.searchWithParam()}>
-                  <CustomSearch />
-                </CompatRoute>
-                <CompatRoute path={routes.searchBase()}>
-                  <CustomSearch />
-                </CompatRoute>
-                <CompatRoute path={routes.singleMatch()}>
-                  <SingleMatch />
-                </CompatRoute>
-                <CompatRoute path={routes.recentMatchesBase()}>
-                  <RecentMatches />
-                </CompatRoute>
-                <CompatRoute path="/userProfile">
-                  <UserProfile />
-                </CompatRoute>
-                <CompatRoute path="*">
-                  <NotFound />
-                </CompatRoute>
-              </Switch>
+              <Routes>
+                <Route path={"/"} element={<MainHome />} />
+                <Route path={routes.fullStatsOldDetails()} element={<OldStats />} />
+                <Route path={routes.mapStats()} element={<MapStats />} />
+                <Route path={routes.statsBase()} element={<CustomStats />} />
+                {/* <Route path={routes.playerCardWithIdAndName()} element={<PlayerCard />} /> */}
+                <Route path={routes.playerCardWithId()} element={<PlayerCard />} />
+                <Route path={routes.playerCardBase()} element={<PlayersPage />} />
+                <Route path={routes.leaderboardsBase()} element={<Leaderboards />} />
+                <Route path={routes.commanderByID()} element={<CommanderDetails />} />
+                <Route path={routes.commanderList()} element={<CommandersList />} />
+                <Route path={routes.commanderBase()} element={<RacePicker />} />
+                <Route path={routes.desktopAppBase()} element={<DesktopApp />} />
+                <Route path={routes.liveMatchesBase()} element={<LiveMatches />} />
+                <Route path={routes.regionsBase()} element={<Regions />} />
+                <Route path={routes.aboutBase()} element={<About />} />
+                <Route path={routes.bulletinsBase()} element={<BulletinList />} />
+                <Route path={routes.searchWithParam()} element={<CustomSearch />} />
+                <Route path={routes.searchBase()} element={<CustomSearch />} />
+                <Route path={routes.singleMatch()} element={<SingleMatch />} />
+                <Route path={routes.recentMatchesBase()} element={<RecentMatches />} />
+                <Route path="/userProfile" element={<UserProfile />} />
+                <Route path="*" element={<NotFound />} />
+              </Routes>
             </CompatRouter>
           </ErrorBoundary>
         </Content>

packages/web/src/components/main-footer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Footer } from "antd/es/layout/layout";
 import { Divider, Typography } from "antd";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom-v5-compat";
 import config from "../config";
 import { RegionSelector } from "./region-selector";
 import { Helper } from "./helper";

packages/web/src/components/main-header.tsx

@@ -20,7 +20,7 @@ import {
   mostRecentGamesAppBase,
   regionsBase,
 } from "../titles";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat"; //yet to convert to v5
 import { doc, getFirestore, onSnapshot } from "firebase/firestore";
 import { ItemType } from "antd/lib/menu/hooks/useItems";
 

packages/web/src/components/main-home.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Card, Col, Row, Space, Typography } from "antd";
 import Meta from "antd/es/card/Meta";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import routes from "../routes";
 import { commanderAndBulletinDate, lastPatchName } from "../config";
 import { doc, getFirestore, getDoc } from "firebase/firestore";

packages/web/src/pages/bulletins/bulletinList.tsx

@@ -7,7 +7,7 @@ import { ColumnsType } from "antd/es/table";
 import { ExportDate } from "../../components/export-date";
 import firebaseAnalytics from "../../analytics";
 import { Tip } from "../../components/tip";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import routes from "../../routes";
 import { ChangeEvent } from "react";
 import { useHistory } from "react-router";

packages/web/src/pages/commanders/commandersList.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect } from "react";
 import { Col, Row, List, Avatar, Typography } from "antd";
 import { getCommanderByRaces, getCommanderIconPath } from "../../coh/commanders";
-import { useParams } from "react-router";
+// import { useParams } from "react-router";
+import { useParams } from "react-router-dom-v5-compat";
 import { RaceName } from "../../coh/types";
 import routes from "../../routes";
 import { ExportDate } from "../../components/export-date";
 import { commanderBase } from "../../titles";
-import { capitalize } from "../../utils/helpers";
-import { Link } from "react-router-dom";
+// import { capitalize } from "../../utils/helpers";
+import { Link } from "react-router-dom-v5-compat";
 import { Tip } from "../../components/tip";
 import { CommanderAbilitiesComponent } from "../../components/commander-abillities-component";
 
@@ -19,7 +20,8 @@ export const CommandersList = () => {
   }>();
 
   useEffect(() => {
-    document.title = `${commanderBase} - ${capitalize(race)}`;
+    // document.title = `${commanderBase} - ${capitalize(race)}`;
+    document.title = `${commanderBase} - ${race}`;
   }, [race]);
 
   let myData = getCommanderByRaces(race as RaceName);

packages/web/src/pages/commanders/racePicker.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Col, Row } from "antd";
 
 import routes from "../../routes";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { Tip } from "../../components/tip";
 import { getGeneralIconPath } from "../../coh/helpers";
 

packages/web/src/pages/ladders/leaderboards.tsx

@@ -11,7 +11,7 @@ import {
   Typography,
   Switch,
 } from "antd";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { useHistory } from "react-router";
 
 import { LaddersDataArrayObject, LaddersDataObject } from "../../coh/types";

packages/web/src/pages/live-matches/live-matches-table.tsx

@@ -12,7 +12,7 @@ import {
   raceIds,
 } from "../../utils/table-functions";
 import { convertSteamNameToID, getGeneralIconPath } from "../../coh/helpers";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import routes from "../../routes";
 import { ColumnsType } from "antd/es/table";
 import { ConfigContext } from "../../config-context";

packages/web/src/pages/map-stats/map-stats-details.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { Row, Card, Radio, RadioChangeEvent, Space, Typography, Tooltip, Select } from "antd";
 import { MapBarChart } from "../../components/charts/maps-bar";
 import { mapStatsBase } from "../../titles";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom-v5-compat";
 import { FactionVsFactionCard } from "../../components/factions";
 import { useMediaQuery } from "react-responsive";
 import { MapsWinRateChart } from "../../components/charts/map-stats/maps-winrate-bar";

packages/web/src/pages/map-stats/map-stats-general-data-provider.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Typography } from "antd";
 import { Loading } from "../../components/loading";
 import { StatsDataObject, validStatsTypes } from "../../coh/types";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom-v5-compat";
 import firebaseAnalytics from "../../analytics";
 import MapStatsDetails from "./map-stats-details";
 import { doc, getDoc, getFirestore } from "firebase/firestore";

packages/web/src/pages/map-stats/map-stats-range-data-provider.tsx

@@ -6,7 +6,7 @@ import { firebase } from "../../firebase";
 import { Loading } from "../../components/loading";
 
 import { validStatsTypes } from "../../coh/types";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom-v5-compat";
 import MapStatsDetails from "./map-stats-details";
 
 const { Title } = Typography;

packages/web/src/pages/matches/all-matches-table.tsx

@@ -24,7 +24,7 @@ import {
   raceIds,
 } from "../../utils/table-functions";
 import { convertSteamNameToID, getGeneralIconPath } from "../../coh/helpers";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import routes from "../../routes";
 import { useMediaQuery } from "react-responsive";
 import { BulbOutlined, DatabaseOutlined, PlusCircleOutlined } from "@ant-design/icons";

packages/web/src/pages/matches/last-matches-table.tsx

@@ -13,7 +13,7 @@ import {
   getPlayerMapListFilter,
 } from "../../utils/table-functions";
 import "./tableStyle.css";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import routes from "../../routes";
 import { convertSteamNameToID, getGeneralIconPath } from "../../coh/helpers";
 import { BulbOutlined, DatabaseOutlined } from "@ant-design/icons";

packages/web/src/pages/matches/match-details-table.tsx

@@ -9,7 +9,7 @@ import firebaseAnalytics from "../../analytics";
 import { getBulletinData, getBulletinIconPath } from "../../coh/bulletins";
 import { getCommanderData, getCommanderIconPath } from "../../coh/commanders";
 import { CommanderAbility } from "../../coh/types";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom-v5-compat";
 import { BulbOutlined } from "@ant-design/icons";
 
 const { Text } = Typography;

packages/web/src/pages/players/player-card/player-team-matches-table.tsx

@@ -5,7 +5,7 @@ import { LaddersDataArrayObject, PlayerCardDataArrayObject } from "../../../coh/
 import { CountryFlag } from "../../../components/country-flag";
 import { Switch, Table, Tooltip, Typography } from "antd";
 import { convertSteamNameToID, levelToText } from "../../../coh/helpers";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import routes from "../../../routes";
 import { convertTeamNames, formatTimeAgo, latestDate, percentageFormat } from "./helpers";
 import { Helper } from "../../../components/helper";

packages/web/src/pages/players/stats/player-stats.tsx

@@ -7,7 +7,7 @@ import { Row } from "antd/es";
 import { Helper } from "../../../components/helper";
 import { Loading } from "../../../components/loading";
 import { AlertBox } from "../../../components/alert-box";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import routes from "../../../routes";
 import firebaseAnalytics from "../../../analytics";
 

packages/web/src/pages/recent-matches/recent-matches.tsx

@@ -21,7 +21,7 @@ import {
   raceIds,
 } from "../../utils/table-functions";
 import { convertSteamNameToID, getGeneralIconPath } from "../../coh/helpers";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import routes from "../../routes";
 import { getMapIconPath } from "../../coh/maps";
 import { AlertBox } from "../../components/alert-box";

packages/web/src/pages/stats/custom-stats-general-data-provider.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Typography } from "antd";
 import { Loading } from "../../components/loading";
 import { StatsDataObject, statTypesInDbAsType, validStatsTypes } from "../../coh/types";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom-v5-compat";
 import CustomStatsDetails from "./custom-stats-details";
 import firebaseAnalytics from "../../analytics";
 import GeneralStats from "./general-stats";

packages/web/src/pages/stats/custom-stats-range-data-provider.tsx

@@ -10,7 +10,7 @@ import {
   TypeAnalysisObject,
   validStatsTypes,
 } from "../../coh/types";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom-v5-compat";
 import CustomStatsDetails from "./custom-stats-details";
 import { StatsHeader } from "./stats-header";
 import GeneralStats from "./general-stats";

packages/web/src/pages/stats/old-stats.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect } from "react";
-import { Redirect, Switch } from "react-router-dom";
 import { useHistory, useParams } from "react-router";
 import routes from "../../routes";
 import { getPreviousWeekTimeStamp, useQuery } from "../../utils/helpers";
-import { CompatRoute } from "react-router-dom-v5-compat";
+import { Link, Routes, Route } from "react-router-dom-v5-compat";
 
 /**
  * This is old stats format, it's used for redirect from the old links
@@ -39,13 +38,13 @@ const OldStats: React.FC = () => {
   }, []);
 
   return (
-    <Switch>
-      <CompatRoute path={"/stats/"}>
-        <Redirect
+    <Routes>
+      <Route path={"/stats/"}>
+        <Link
           to={routes.fullStatsOldDetails("week", getPreviousWeekTimeStamp(), "4v4", "wermacht")}
         />
-      </CompatRoute>
-    </Switch>
+      </Route>
+    </Routes>
   );
 };
 

packages/web/src/utils/helpers.ts

@@ -1,4 +1,4 @@
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom-v5-compat";
 import { eachDayOfInterval, format } from "date-fns";
 
 import TimeAgo from "javascript-time-ago";

packages/web/src/utils/table-functions.tsx

@@ -5,7 +5,7 @@ import firebaseAnalytics from "../analytics";
 import { MatchPlayerDetailsTable } from "../pages/matches/match-details-table";
 import { SimplePieChart } from "../components/charts-match/simple-pie";
 import MatchDetails from "../pages/matches/match-details";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import routes from "../routes";
 import { DatabaseOutlined } from "@ant-design/icons";
 import { RelicIcon } from "../components/relic-icon";