fix: router history fix

web/src/components/DisputeCard/index.tsx

@@ -5,11 +5,11 @@ import { utils } from "ethers";
 import Skeleton from "react-loading-skeleton";
 import { Card } from "@kleros/ui-components-library";
 import { Periods } from "consts/periods";
-import { useGetMetaEvidence } from "queries/useGetMetaEvidence";
-import { useCourtPolicy } from "queries/useCourtPolicy";
 import { CasesPageQuery } from "queries/useCasesQuery";
-import PeriodBanner from "./PeriodBanner";
+import { useCourtPolicy } from "queries/useCourtPolicy";
+import { useGetMetaEvidence } from "queries/useGetMetaEvidence";
 import DisputeInfo from "./DisputeInfo";
+import PeriodBanner from "./PeriodBanner";
 
 const StyledCard = styled(Card)`
   max-width: 380px;
@@ -29,11 +29,7 @@ const Container = styled.div`
   }
 `;
 
-const getPeriodEndTimestamp = (
-  lastPeriodChange: string,
-  currentPeriodIndex: number,
-  timesPerPeriod: string[]
-) => {
+const getPeriodEndTimestamp = (lastPeriodChange: string, currentPeriodIndex: number, timesPerPeriod: string[]) => {
   const durationCurrentPeriod = parseInt(timesPerPeriod[currentPeriodIndex]);
   return parseInt(lastPeriodChange) + durationCurrentPeriod;
 };
@@ -50,11 +46,7 @@ const DisputeCard: React.FC<CasesPageQuery["disputes"][number]> = ({
   const date =
     currentPeriodIndex === 4
       ? lastPeriodChange
-      : getPeriodEndTimestamp(
-          lastPeriodChange,
-          currentPeriodIndex,
-          court.timesPerPeriod
-        );
+      : getPeriodEndTimestamp(lastPeriodChange, currentPeriodIndex, court.timesPerPeriod);
   const { data: metaEvidence } = useGetMetaEvidence(id, arbitrated.id);
   const title = metaEvidence ? metaEvidence.title : <Skeleton />;
   const { data: courtPolicy } = useCourtPolicy(court.id);

web/src/pages/Cases/CaseDetails/index.tsx

@@ -1,45 +1,35 @@
 import React from "react";
 import styled from "styled-components";
-import { Routes, Route, useParams, Navigate } from "react-router-dom";
+import { Route, Routes, useParams, Navigate } from "react-router-dom";
 import { Card } from "@kleros/ui-components-library";
 import { Periods } from "consts/periods";
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
+import Appeal from "./Appeal";
+import Evidence from "./Evidence";
+import Overview from "./Overview";
 import Tabs from "./Tabs";
 import Timeline from "./Timeline";
-import Overview from "./Overview";
-import Evidence from "./Evidence";
 import Voting from "./Voting";
-import Appeal from "./Appeal";
 
 const CaseDetails: React.FC = () => {
   const { id } = useParams();
   const { data } = useDisputeDetailsQuery(id);
   const dispute = data?.dispute;
   const currentPeriodIndex = dispute ? Periods[dispute.period] : 0;
   const arbitrable = dispute?.arbitrated.id;
+
   return (
     <Container>
       <h1>Case #{id}</h1>
       <Tabs />
       <Timeline {...{ currentPeriodIndex, dispute }} />
       <StyledCard>
         <Routes>
-          <Route
-            path="overview"
-            element={
-              <Overview courtID={dispute?.court.id} {...{ arbitrable }} />
-            }
-          />
+          <Route path="overview" element={<Overview courtID={dispute?.court.id} {...{ arbitrable }} />} />
           <Route path="evidence" element={<Evidence {...{ arbitrable }} />} />
-          <Route
-            path="voting"
-            element={<Voting {...{ arbitrable, currentPeriodIndex }} />}
-          />
-          <Route
-            path="appeal"
-            element={<Appeal {...{ currentPeriodIndex }} />}
-          />
-          <Route path="*" element={<Navigate to="overview" />} />
+          <Route path="voting" element={<Voting {...{ arbitrable, currentPeriodIndex }} />} />
+          <Route path="appeal" element={<Appeal {...{ currentPeriodIndex }} />} />
+          <Route path="*" element={<Navigate to="overview" replace />} />
         </Routes>
       </StyledCard>
     </Container>

web/src/pages/Courts/CourtDetails/Description.tsx

@@ -57,7 +57,7 @@ const Description: React.FC = () => {
           <Route path="purpose" element={formatMarkdown(policy?.description)} />
           <Route path="skills" element={<p>{policy?.requiredSkills}</p>} />
           <Route path="policy" element={formatMarkdown(policy?.summary)} />
-          <Route path="*" element={<Navigate to="purpose" />} />
+          <Route path="*" element={<Navigate to="purpose" replace />} />
         </Routes>
       </TextContainer>
     </Container>

web/src/pages/Courts/index.tsx

@@ -17,7 +17,7 @@ const Courts: React.FC = () => {
       <TopSearch />
       <Routes>
         <Route path="/:id/*" element={<CourtDetails />} />
-        <Route path="*" element={<Navigate to="1" />} />
+        <Route path="*" element={<Navigate to="1" replace />} />
       </Routes>
     </Container>
   );