replace instead of push route when changing tabs for more intuitive n…

…avigation
aptos-labs · Jun 30, 2023 · 06d46fc · 06d46fc
1 parent d7b3fe0
commit 06d46fc
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 15 deletions.
diff --git a/src/components/GoBack.tsx b/src/components/GoBack.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import Button from "@mui/material/Button";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import {useNavigate} from "../routing";
@@ -29,20 +28,14 @@ type GoBackProps = {
   to?: string;
 };
 
-export default function GoBack({to}: GoBackProps): JSX.Element | null {
+export default function GoBack(): JSX.Element | null {
   const navigate = useNavigate();
 
   if (window.history.state && window.history.state.idx > 0) {
     return BackButton(() => {
       navigate(-1);
     });
   } else {
-    if (to != null) {
-      return BackButton(() => {
-        navigate(to);
-      });
-    } else {
-      return null;
-    }
+    return null;
   }
 }
diff --git a/src/pages/Account/Tabs.tsx b/src/pages/Account/Tabs.tsx
@@ -105,7 +105,7 @@ export default function AccountTabs({
   }
 
   const handleChange = (event: React.SyntheticEvent, newValue: TabValue) => {
-    navigate(`/account/${address}/${newValue}`);
+    navigate(`/account/${address}/${newValue}`, {replace: true});
   };
 
   return (

diff --git a/src/pages/Account/Tabs/ModulesTab/Tabs.tsx b/src/pages/Account/Tabs/ModulesTab/Tabs.tsx
@@ -76,6 +76,7 @@ function ModulesTabs({address}: {address: string}): JSX.Element {
     navigate(
       `/account/${address}/modules/${newValue}/${selectedModuleName}` +
         (selectedFnName ? `/${selectedFnName}` : ``),
+      {replace: true},
     );
   };
 

diff --git a/src/pages/Block/Tabs.tsx b/src/pages/Block/Tabs.tsx
@@ -66,7 +66,7 @@ export default function BlockTabs({
   const value = tab === undefined ? TAB_VALUES[0] : (tab as TabValue);
 
   const handleChange = (event: React.SyntheticEvent, newValue: TabValue) => {
-    navigate(`/block/${height}/${newValue}`);
+    navigate(`/block/${height}/${newValue}`, {replace: true});
   };
 
   return (

diff --git a/src/pages/Token/Index.tsx b/src/pages/Token/Index.tsx
@@ -1,7 +1,6 @@
 import {useParams} from "react-router-dom";
 import {gql, useQuery} from "@apollo/client";
 import {Stack, Grid} from "@mui/material";
-import React from "react";
 import TokenTitle from "./Title";
 import TokenTabs from "./Tabs";
 import PageHeader from "../layout/PageHeader";

diff --git a/src/pages/Token/Tabs.tsx b/src/pages/Token/Tabs.tsx
@@ -65,7 +65,9 @@ export default function TokenTabs({
   const value = tab === undefined ? TAB_VALUES[0] : (tab as TabValue);
 
   const handleChange = (event: React.SyntheticEvent, newValue: TabValue) => {
-    navigate(`/token/${tokenId}/${propertyVersion}/${newValue}`);
+    navigate(`/token/${tokenId}/${propertyVersion}/${newValue}`, {
+      replace: true,
+    });
   };
 
   return (

diff --git a/src/pages/Transaction/Index.tsx b/src/pages/Transaction/Index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import {Stack, Grid, Alert} from "@mui/material";
 import {Types} from "aptos";
 import {useGlobalState} from "../../global-config/GlobalConfig";

diff --git a/src/pages/Transaction/Tabs.tsx b/src/pages/Transaction/Tabs.tsx
@@ -132,7 +132,7 @@ export default function TransactionTabs({
     tab === undefined ? getTabValues(transaction)[0] : (tab as TabValue);
 
   const handleChange = (event: React.SyntheticEvent, newValue: TabValue) => {
-    navigate(`/txn/${txnHashOrVersion}/${newValue}`);
+    navigate(`/txn/${txnHashOrVersion}/${newValue}`, {replace: true});
   };
 
   return (