Use react-router Switch to control visible content

explorer/src/App.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, Switch, Route, Redirect } from "react-router-dom";
 
 import ClusterStatusButton from "./components/ClusterStatusButton";
 import AccountsCard from "./components/AccountsCard";
@@ -9,10 +9,11 @@ import TransactionModal from "./components/TransactionModal";
 import AccountModal from "./components/AccountModal";
 import Logo from "./img/logos-solana/light-explorer-logo.svg";
 import { useCurrentTab, Tab } from "./providers/tab";
+import { TX_PATHS } from "./providers/transactions";
+import { ACCOUNT_PATHS } from "./providers/accounts";
 
 function App() {
   const [showClusterModal, setShowClusterModal] = React.useState(false);
-  const currentTab = useCurrentTab();
   return (
     <>
       <ClusterModal
@@ -65,16 +66,17 @@ function App() {
         </div>
 
         <div className="container">
-          <div className="row">
-            <div className="col-12">
-              {currentTab === "Transactions" ? <TransactionsCard /> : null}
-            </div>
-          </div>
-          <div className="row">
-            <div className="col-12">
-              {currentTab === "Accounts" ? <AccountsCard /> : null}
-            </div>
-          </div>
+          <Switch>
+            <Route exact path="/">
+              <Redirect to="/transactions" />
+            </Route>
+            <Route path={TX_PATHS}>
+              <TransactionsCard />
+            </Route>
+            <Route path={ACCOUNT_PATHS}>
+              <AccountsCard />
+            </Route>
+          </Switch>
         </div>
       </div>
     </>

explorer/src/providers/accounts.tsx

@@ -122,14 +122,20 @@ function reducer(state: State, action: Action): State {
   return state;
 }
 
-export const ACCOUNT_PATHS = ["account", "accounts", "address", "addresses"];
+export const ACCOUNT_PATHS = [
+  "/account",
+  "/accounts",
+  "/address",
+  "/addresses"
+];
 
 function urlAddresses(): Array<string> {
   const addresses: Array<string> = [];
 
   ACCOUNT_PATHS.forEach(path => {
-    const params = findGetParameter(path)?.split(",") || [];
-    const segments = findPathSegment(path)?.split(",") || [];
+    const name = path.slice(1);
+    const params = findGetParameter(name)?.split(",") || [];
+    const segments = findPathSegment(name)?.split(",") || [];
     addresses.push(...params);
     addresses.push(...segments);
   });

explorer/src/providers/tab.tsx

@@ -9,7 +9,10 @@ const StateContext = React.createContext<Tab | undefined>(undefined);
 type TabProviderProps = { children: React.ReactNode };
 export function TabProvider({ children }: TabProviderProps) {
   const location = useLocation();
-  const paths = location.pathname.slice(1).split("/");
+  const paths = location.pathname
+    .slice(1)
+    .split("/")
+    .map(name => `/${name}`);
   let tab: Tab = "Transactions";
   if (ACCOUNT_PATHS.includes(paths[0].toLowerCase())) {
     tab = "Accounts";

explorer/src/providers/transactions.tsx

@@ -138,20 +138,21 @@ function reducer(state: State, action: Action): State {
 }
 
 export const TX_PATHS = [
-  "tx",
-  "txs",
-  "txn",
-  "txns",
-  "transaction",
-  "transactions"
+  "/tx",
+  "/txs",
+  "/txn",
+  "/txns",
+  "/transaction",
+  "/transactions"
 ];
 
 function urlSignatures(): Array<string> {
   const signatures: Array<string> = [];
 
   TX_PATHS.forEach(path => {
-    const params = findGetParameter(path)?.split(",") || [];
-    const segments = findPathSegment(path)?.split(",") || [];
+    const name = path.slice(1);
+    const params = findGetParameter(name)?.split(",") || [];
+    const segments = findPathSegment(name)?.split(",") || [];
     signatures.push(...params);
     signatures.push(...segments);
   });