add use of useRoutes with nested children rotues and outlets

apps/explorer/src/app/app.tsx

@@ -12,7 +12,10 @@ import { DATA_SOURCES } from './config';
 import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
 
 function App() {
-  const [client] = React.useState(createClient(DATA_SOURCES.dataNodeUrl));
+  const client = React.useMemo(
+    () => createClient(DATA_SOURCES.dataNodeUrl),
+    []
+  );
   return (
     <TendermintWebsocketProvider>
       <ApolloProvider client={client}>

apps/explorer/src/app/components/nav/index.tsx

@@ -6,8 +6,7 @@ export const Nav = () => {
     <nav>
       {routerConfig.map((r) => (
         <div key={r.name}>
-          {/* TODO stupid hack */}
-          <Link to={r.path.replace('/*', '')}>{r.name}</Link>
+          <Link to={r.path}>{r.name}</Link>
           <br />
         </div>
       ))}

apps/explorer/src/app/components/search/index.tsx

@@ -94,11 +94,7 @@ const Search = () => {
       <h1>Vega Block Explorer</h1>
       <fieldset>
         <label htmlFor="search">Search: </label>
-        <input
-          name="search"
-          value={search}
-          onChange={(e) => onChange(e)}
-        ></input>
+        <input name="search" value={search} onChange={(e) => onChange(e)} />
       </fieldset>
     </section>
   );

apps/explorer/src/app/routes/blocks/index.tsx

@@ -1,15 +1,7 @@
-import React from 'react';
-import { Route, Routes } from 'react-router-dom';
-import { Blocks } from './home';
-import { Block } from './id';
+import { Outlet } from 'react-router-dom';
 
 const BlockPage = () => {
-  return (
-    <Routes>
-      <Route index={true} element={<Blocks />} />
-      <Route path={`/:block`} element={<Block />} />
-    </Routes>
-  );
+  return <Outlet />;
 };
 
 export default BlockPage;

apps/explorer/src/app/routes/index.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { useRoutes } from 'react-router-dom';
 import { RouteErrorBoundary } from '../components/router-error-boundary';
 
 import { SplashLoader } from '../components/splash-loader';
 import { SplashScreen } from '../components/splash-screen';
-import Home from './home';
 import routerConfig from './router-config';
 
 export interface RouteChildProps {
@@ -12,6 +11,8 @@ export interface RouteChildProps {
 }
 
 export const AppRouter = () => {
+  const routes = useRoutes(routerConfig);
+
   const splashLoading = (
     <SplashScreen>
       <SplashLoader />
@@ -20,15 +21,7 @@ export const AppRouter = () => {
 
   return (
     <RouteErrorBoundary>
-      <React.Suspense fallback={splashLoading}>
-        <Routes>
-          <>
-            {routerConfig.map(({ path, component: Component, name }) => (
-              <Route key={name} path={path} element={<Component />} />
-            ))}
-          </>
-        </Routes>
-      </React.Suspense>
+      <React.Suspense fallback={splashLoading}>{routes}</React.Suspense>
     </RouteErrorBoundary>
   );
 };

apps/explorer/src/app/routes/parties/index.tsx

@@ -1,15 +1,7 @@
-import React from 'react';
-import { Route, Routes } from 'react-router-dom';
-import { Parties } from './home';
-import { Party } from './id';
+import { Outlet } from 'react-router-dom';
 
 const PartiesPage = () => {
-  return (
-    <Routes>
-      <Route index={true} element={<Parties />} />
-      <Route path={`/:party`} element={<Party />} />
-    </Routes>
-  );
+  return <Outlet />;
 };
 
 export default PartiesPage;

apps/explorer/src/app/routes/router-config.ts

@@ -1,79 +0,0 @@
-import Assets from './assets';
-import Blocks from './blocks';
-import Governance from './governance';
-import Home from './home';
-import Markets from './markets';
-import Party from './parties';
-import Txs from './txs';
-import Validators from './validators';
-import Genesis from './genesis';
-import NetworkParameters from './network-parameters';
-
-export const Routes = {
-  HOME: '/',
-  TX: 'txs/*',
-  BLOCKS: 'blocks/*',
-  PARTIES: 'parties/*',
-  VALIDATORS: 'validators/*',
-  ASSETS: 'assets/*',
-  GENESIS: 'genesis/*',
-  GOVERNANCE: 'governance/*',
-  MARKETS: 'markets/*',
-  NETWORK_PARAMETERS: 'network-parameters/*',
-};
-
-const routerConfig = [
-  {
-    path: Routes.HOME,
-    name: 'Home',
-    component: Home,
-    index: true,
-  },
-  {
-    path: `${Routes.TX}/*`,
-    name: 'Txs',
-    component: Txs,
-  },
-  {
-    path: Routes.BLOCKS,
-    name: 'Blocks',
-    component: Blocks,
-  },
-  {
-    path: Routes.PARTIES,
-    name: 'Parties',
-    component: Party,
-  },
-  {
-    path: Routes.ASSETS,
-    name: 'Assets',
-    component: Assets,
-  },
-  {
-    path: Routes.GENESIS,
-    name: 'Genesis',
-    component: Genesis,
-  },
-  {
-    path: Routes.GOVERNANCE,
-    name: 'Governance',
-    component: Governance,
-  },
-  {
-    path: Routes.MARKETS,
-    name: 'Markets',
-    component: Markets,
-  },
-  {
-    path: Routes.NETWORK_PARAMETERS,
-    name: 'NetworkParameters',
-    component: NetworkParameters,
-  },
-  {
-    path: Routes.VALIDATORS,
-    name: 'Validators',
-    component: Validators,
-  },
-];
-
-export default routerConfig;

apps/explorer/src/app/routes/router-config.tsx

@@ -0,0 +1,115 @@
+import Assets from './assets';
+import Blocks from './blocks';
+import Governance from './governance';
+import Home from './home';
+import Markets from './markets';
+import Party from './parties';
+import { Parties } from './parties/home';
+import { Party as PartySingle } from './parties/id';
+import Txs from './txs';
+import Validators from './validators';
+import Genesis from './genesis';
+import NetworkParameters from './network-parameters';
+import { Block } from './blocks/id';
+import { Blocks as BlocksHome } from './blocks/home';
+import { Tx } from './txs/id';
+import { Txs as TxHome } from './txs/home';
+
+export const Routes = {
+  HOME: '/',
+  TX: 'txs',
+  BLOCKS: 'blocks',
+  PARTIES: 'parties',
+  VALIDATORS: 'validators',
+  ASSETS: 'assets',
+  GENESIS: 'genesis',
+  GOVERNANCE: 'governance',
+  MARKETS: 'markets',
+  NETWORK_PARAMETERS: 'network-parameters',
+};
+
+const routerConfig = [
+  {
+    path: Routes.HOME,
+    name: 'Home',
+    element: <Home />,
+    index: true,
+  },
+  {
+    path: Routes.TX,
+    name: 'Txs',
+    element: <Txs />,
+    children: [
+      {
+        path: ':txHash',
+        element: <Tx />,
+      },
+      {
+        index: true,
+        element: <TxHome />,
+      },
+    ],
+  },
+  {
+    path: Routes.BLOCKS,
+    name: 'Blocks',
+    element: <Blocks />,
+    children: [
+      {
+        path: ':block',
+        element: <Block />,
+      },
+      {
+        index: true,
+        element: <BlocksHome />,
+      },
+    ],
+  },
+  {
+    path: Routes.PARTIES,
+    name: 'Parties',
+    element: <Party />,
+    children: [
+      {
+        index: true,
+        element: <Parties />,
+      },
+      {
+        path: ':party',
+        element: <PartySingle />,
+      },
+    ],
+  },
+  {
+    path: Routes.ASSETS,
+    name: 'Assets',
+    element: <Assets />,
+  },
+  {
+    path: Routes.GENESIS,
+    name: 'Genesis',
+    element: <Genesis />,
+  },
+  {
+    path: Routes.GOVERNANCE,
+    name: 'Governance',
+    element: <Governance />,
+  },
+  {
+    path: Routes.MARKETS,
+    name: 'Markets',
+    element: <Markets />,
+  },
+  {
+    path: Routes.NETWORK_PARAMETERS,
+    name: 'NetworkParameters',
+    element: <NetworkParameters />,
+  },
+  {
+    path: Routes.VALIDATORS,
+    name: 'Validators',
+    element: <Validators />,
+  },
+];
+
+export default routerConfig;

apps/explorer/src/app/routes/txs/index.tsx

@@ -1,15 +1,7 @@
-import React from 'react';
-import { Route, Routes } from 'react-router-dom';
-import { Txs } from './home';
-import { Tx } from './id';
+import { Outlet } from 'react-router-dom';
 
 const TxPage = () => {
-  return (
-    <Routes>
-      <Route index={true} element={<Txs />} />
-      <Route path={`/:txHash`} element={<Tx />} />
-    </Routes>
-  );
+  return <Outlet />;
 };
 
 export default TxPage;