Upgraded to React 18 and latest React Router (#10)

website/package.json

@@ -8,16 +8,15 @@
     "d3-geo": "^1.11.1",
     "d3-scale-chromatic": "^1.3.3",
     "date-fns": "^2.6.0",
-    "history": "^4.7.2",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.21",
     "polished": "^3.4.2",
     "prop-types": "^15.6.0",
     "rc-slider": "^9.2.4",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-helmet": "^6.0.0",
-    "react-media": "^1.8.0",
-    "react-router-dom": "^5.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
+    "react-media": "^1.10.0",
+    "react-router-dom": "^6.24.1",
     "react-tweet-embed": "^1.1.0",
     "styled-components": "^6.1.11",
     "topojson-client": "^3.0.0",

website/src/components/App.tsx

@@ -0,0 +1,45 @@
+import {lazy, Suspense} from 'react';
+import {BrowserRouter, Route, Routes} from 'react-router-dom';
+import {ThemeProvider} from 'styled-components';
+
+import theme from '../resources/theme.json';
+
+const AsyncFootballScheduleScreen = lazy(() =>
+  import('../screens/FootballScheduleScreen/index').then((module) => ({
+    default: module.FootballScheduleScreen,
+  }))
+);
+
+const AsyncExplorablesScreen = lazy(() =>
+  // @ts-expect-error TODO: Remove this after porting explorables to TypeScript.
+  import('../screens/ExplorablesScreen/index').then((module) => ({
+    default: module.ExplorablesScreen,
+  }))
+);
+
+export const App: React.FC = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <BrowserRouter>
+        <Routes>
+          <Route
+            path="/explorables/*"
+            element={
+              <Suspense fallback={null}>
+                <AsyncExplorablesScreen />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/:selectedYear?/:selectedGameIndex?/"
+            element={
+              <Suspense fallback={null}>
+                <AsyncFootballScheduleScreen />
+              </Suspense>
+            }
+          />
+        </Routes>
+      </BrowserRouter>
+    </ThemeProvider>
+  );
+};

website/src/components/gameSummary/GameSummary.tsx

@@ -1,4 +1,3 @@
-import clone from 'lodash/clone';
 import React from 'react';
 
 import {FullSchedule, TeamId} from '../../models';
@@ -12,8 +11,7 @@ export const GameSummary: React.FC<{
   readonly selectedSeason: number;
   readonly selectedGameIndex: number;
 }> = ({selectedSeason, selectedGameIndex}) => {
-  const games = schedule[selectedSeason];
-  const game = clone(games[selectedGameIndex]);
+  const game = schedule[selectedSeason][selectedGameIndex];
 
   const homeTeamId = game.isHomeGame ? TeamId.ND : game.opponentId;
   const awayTeamId = game.isHomeGame ? game.opponentId : TeamId.ND;