[Platform]: update to react-router v6

apps/platform/.env

@@ -1,3 +1,3 @@
-VITE_API_URL=https://api.partner-platform.dev.opentargets.xyz/api/v4/graphql
+VITE_API_URL=https://api.platform.dev.opentargets.xyz/api/v4/graphql
 VITE_AI_API_URL=https://dev-ai-api-w37vlfsidq-ew.a.run.app
 VITE_PROFILE=default

apps/platform/package.json

@@ -34,7 +34,7 @@
     "react-dropzone": "^14.2.3",
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.0.0",
-    "react-router-dom": "5.1.2",
+    "react-router-dom": "6.28.0",
     "react-tsparticles": "^2.0.6",
     "sections": "*",
     "smiles-drawer": "^1.1.22",

apps/platform/src/App.tsx

@@ -1,4 +1,5 @@
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { ReactElement } from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { ApolloProvider } from "@apollo/client";
 import { ThemeProvider, SearchProvider, PrivateRoute, ConfigurationProvider } from "ui";
 
@@ -19,7 +20,6 @@ import APIPage from "./pages/APIPage";
 import NotFoundPage from "./pages/NotFoundPage";
 import ProjectsPage from "./pages/ProjectsPage";
 import { getSuggestedSearch } from "./utils/global";
-import { ReactElement } from "react";
 
 function App(): ReactElement {
   const suggestions = getSuggestedSearch();
@@ -33,49 +33,28 @@ function App(): ReactElement {
             searchPlaceholder="Search for a target, drug, disease, or phenotype..."
           >
             <Router>
-              <Switch>
-                <Route exact path="/">
-                  <HomePage suggestions={suggestions} />
-                </Route>
-                <Route path="/search">
-                  <SearchPage />
-                </Route>
-                <Route path="/downloads">
-                  <DownloadsPage />
-                </Route>
-                <Route path="/disease/:efoId">
-                  <DiseasePage />
-                </Route>
-                <Route path="/target/:ensgId">
-                  <TargetPage />
-                </Route>
-                <Route path="/drug/:chemblId">
-                  <DrugPage />
-                </Route>
-                <Route path="/evidence/:ensgId/:efoId">
-                  <EvidencePage />
-                </Route>
-                <Route path="/variant/:varId">
-                  <VariantPage />
-                </Route>
-                <Route path="/study/:studyId">
-                  <StudyPage />
-                </Route>
-                <Route path="/credible-set/:studyLocusId">
-                  <CredibleSetPage />
-                </Route>
-                <Route path="/api">
-                  <APIPage />
-                </Route>
-                <Route path="/projects">
-                  <PrivateRoute>
-                    <ProjectsPage />
-                  </PrivateRoute>
-                </Route>
-                <Route>
-                  <NotFoundPage />
-                </Route>
-              </Switch>
+              <Routes>
+                <Route path="/" element={<HomePage suggestions={suggestions} />} />
+                <Route path="/api" element={<APIPage />} />
+                <Route path="/search" element={<SearchPage />} />
+                <Route path="/downloads" element={<DownloadsPage />} />
+                <Route path="/target/:ensgId/*" element={<TargetPage />} />
+                <Route path="/disease/:efoId/*" element={<DiseasePage />} />
+                <Route path="/evidence/:ensgId/:efoId/*" element={<EvidencePage />} />
+                <Route path="/drug/:chemblId/*" element={<DrugPage />} />
+                <Route path="/variant/:varId/*" element={<VariantPage />} />
+                <Route path="/study/:studyId/*" element={<StudyPage />} />
+                <Route path="/credible-set/:studyLocusId/*" element={<CredibleSetPage />} />
+                <Route
+                  path="/projects"
+                  element={
+                    <PrivateRoute>
+                      <ProjectsPage />
+                    </PrivateRoute>
+                  }
+                />
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
             </Router>
           </SearchProvider>
         </ThemeProvider>

apps/platform/src/components/AssociationsToolkit/components/Table/CellName.jsx

@@ -21,7 +21,7 @@ import {
   faBezierCurve,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import useAotfContext from "../../hooks/useAotfContext";
 import { ENTITIES, isPartnerPreview, TABLE_PREFIX } from "../../utils";
 import { grey } from "@mui/material/colors";
@@ -85,7 +85,7 @@ const ContextMenuContainer = styled("div", {
 }));
 
 function CellName({ cell, colorScale }) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const contextMenuRef = useRef();
   const { entityToGet, pinnedEntries, setPinnedEntries, id: currentEntityId } = useAotfContext();
   const { loading, prefix } = cell.table.getState();
@@ -180,15 +180,15 @@ function CellName({ cell, colorScale }) {
   };
 
   const handleNavigateToProfile = () => {
-    history.push(profileURL);
+    navigate(profileURL);
   };
 
   const handleNavigateToAssociations = () => {
-    history.push(associationsURL);
+    navigate(associationsURL);
   };
 
   const handleNavigateToEvidence = () => {
-    history.push(evidenceURL);
+    navigate(evidenceURL);
   };
 
   const loadingWidth = entityToGet === ENTITIES.TARGET ? 50 : 150;

apps/platform/src/pages/CredibleSetPage/CredibleSetPage.tsx

@@ -1,19 +1,19 @@
+import { ReactElement } from "react";
+import { useLocation, useParams, Link } from "react-router-dom";
 import { useQuery } from "@apollo/client";
-import { useLocation, useParams, Switch, Route, useRouteMatch, Link } from "react-router-dom";
 import { Box, Tabs, Tab } from "@mui/material";
 import { BasePage, ScrollToTop } from "ui";
 import Header from "./Header";
 import NotFoundPage from "../NotFoundPage";
 import CREDIBLE_SET_PAGE_QUERY from "./CredibleSetPage.gql";
 import Profile from "./Profile";
 
-function CredibleSetPage() {
+function CredibleSetPage(): ReactElement {
   const location = useLocation();
   const { studyLocusId } = useParams() as { studyLocusId: string };
-  const { path } = useRouteMatch();
 
   const { loading, data } = useQuery(CREDIBLE_SET_PAGE_QUERY, {
-    variables: { studyLocusId: studyLocusId },
+    variables: { studyLocusId },
   });
 
   if (data && !data?.credibleSet) {
@@ -31,42 +31,34 @@ function CredibleSetPage() {
       description={`Annotation information for credible set ${studyLocusId}`}
       location={location}
     >
-      <Header
-        loading={loading}
-        studyId={studyId}
-        variantId={variantId}
-        referenceAllele={referenceAllele}
-        alternateAllele={alternateAllele}
-        studyType={studyType}
-      />
-      <ScrollToTop />
-      <Route
-        path="/"
-        render={history => (
-          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-            <Tabs value={history.location.pathname !== "/" ? history.location.pathname : false}>
-              <Tab
-                label={<Box sx={{ textTransform: "capitalize" }}>Profile</Box>}
-                value={`/credible-set/${studyLocusId}`}
-                component={Link}
-                to={`/credible-set/${studyLocusId}`}
-              />
-            </Tabs>
-          </Box>
-        )}
-      />
-
-      <Switch>
-        <Route exact path={path}>
-          <Profile
-            studyLocusId={studyLocusId}
-            variantId={variantId}
-            referenceAllele={referenceAllele}
-            alternateAllele={alternateAllele}
-            studyType={studyType}
-          />
-        </Route>
-      </Switch>
+      <>
+        <Header
+          loading={loading}
+          studyId={studyId}
+          variantId={variantId}
+          referenceAllele={referenceAllele}
+          alternateAllele={alternateAllele}
+          studyType={studyType}
+        />
+        <ScrollToTop />
+        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <Tabs value={location.pathname}>
+            <Tab
+              label={<Box sx={{ textTransform: "capitalize" }}>Profile</Box>}
+              value={location.pathname}
+              component={Link}
+              to={`/credible-set/${studyLocusId}`}
+            />
+          </Tabs>
+        </Box>
+        <Profile
+          studyLocusId={studyLocusId}
+          variantId={variantId}
+          referenceAllele={referenceAllele}
+          alternateAllele={alternateAllele}
+          studyType={studyType}
+        />
+      </>
     </BasePage>
   );
 }

apps/platform/src/pages/DiseasePage/DiseasePage.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 import { useQuery } from "@apollo/client";
 import { Box, Tab, Tabs } from "@mui/material";
-import { Link, Redirect, Route, Switch, useLocation, useParams } from "react-router-dom";
+import { Link, Route, Routes, useLocation, useParams } from "react-router-dom";
 import { BasePage, ScrollToTop } from "ui";
 
 import Header from "./Header";
@@ -42,40 +42,30 @@ function DiseasePage(): ReactElement {
       }
       location={location}
     >
-      <Header loading={loading} efoId={efoId} name={name} dbXRefs={dbXRefs} />
-      <ScrollToTop />
-      <Route
-        path="/"
-        render={history => (
-          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-            <Tabs value={history.location.pathname !== "/" ? history.location.pathname : false}>
-              <Tab
-                label={<Box sx={{ textTransform: "capitalize" }}>Associated targets</Box>}
-                value={`/disease/${efoId}/associations`}
-                component={Link}
-                to={`/disease/${efoId}/associations`}
-              />
-              <Tab
-                label={<Box sx={{ textTransform: "capitalize" }}>Profile</Box>}
-                value={`/disease/${efoId}`}
-                component={Link}
-                to={`/disease/${efoId}`}
-              />
-            </Tabs>
-          </Box>
-        )}
-      />
-      <Switch>
-        <Route exact path="/disease/:efoId">
-          <Profile efoId={efoId} name={name} />
-        </Route>
-        <Route path="/disease/:efoId/associations">
-          <Associations efoId={efoId} />
-        </Route>
-        <Route path="*">
-          <Redirect to={`/disease/${efoId}`} />
-        </Route>
-      </Switch>
+      <>
+        <Header loading={loading} efoId={efoId} name={name} dbXRefs={dbXRefs} />
+        <ScrollToTop />
+        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <Tabs value={location.pathname}>
+            <Tab
+              label={<Box sx={{ textTransform: "capitalize" }}>Associated targets</Box>}
+              value={`/disease/${efoId}/associations`}
+              component={Link}
+              to={`/disease/${efoId}/associations`}
+            />
+            <Tab
+              label={<Box sx={{ textTransform: "capitalize" }}>Profile</Box>}
+              value={`/disease/${efoId}`}
+              component={Link}
+              to={`/disease/${efoId}`}
+            />
+          </Tabs>
+        </Box>
+        <Routes>
+          <Route path="/" element={<Profile efoId={efoId} name={name} />} />
+          <Route path="/associations" element={<Associations efoId={efoId} />} />
+        </Routes>
+      </>
     </BasePage>
   );
 }