Address nits and add comments to routing utils

src/containers/Accounts/AccountAssetTab/AccountAssetTab.tsx

@@ -12,8 +12,9 @@ interface Props {
   account: any
 }
 
+const assetTypes = ['issued', 'nft']
+
 const AccountAssetTabDisconnected = ({ account }: Props) => {
-  const assetTypes = ['issued', 'nft']
   const { id: accountId = '', assetType = assetTypes[0] } =
     useRouteParams(ACCOUNT_ROUTE)
   const navigate = useNavigate()

src/containers/Header/NavigationMenu/NavigationMenu.tsx

@@ -82,7 +82,7 @@ export const NavigationMenu = ({
           <li className="nav-item nav-search">
             <Search />
           </li>
-          {routes.map((nav): any => {
+          {routes.map((nav) => {
             const title = t(nav.title)
 
             if ('children' in nav) {
@@ -98,6 +98,7 @@ export const NavigationMenu = ({
                       href={buildPath(child.route, {})}
                       data-title={title}
                       className="nav-link"
+                      key={child.title}
                     >
                       {t(child.title)}
                     </DropdownItem>

src/containers/shared/routing.tsx

@@ -5,22 +5,28 @@ import {
   useParams as useRouterParams,
 } from 'react-router-dom'
 
+/**
+ * A definition for a react-router route that allows for typed routes
+ *
+ * @example
+ * export const ACCOUNT_ROUTE: RouteDefinition<{
+ *   id?: string
+ *   tab?: 'assets' | 'transactions'
+ *   assetType?: 'issued' | 'nfts'
+ * }> = {
+ *   path: '/accounts/:id?/:tab?/:assetType?',
+ * }
+ */
 export interface RouteDefinition<T = {}> {
-  path: string
-  sampleParams?: T
-}
-
-export interface LinkProps<
-  T extends RouteDefinition,
-  K extends T['sampleParams'] = T['sampleParams'],
-> {
-  children?: ReactNode
-  to: T
-  params?: K
-  innerRef?: Ref<HTMLAnchorElement>
-  [key: string]: any
+  path: string // react-router style path with replacements ex. "/ledgers/:identifier"
+  sampleParams?: T // A phantom field used for typing the parameters on `NavigationLink` and `buildPath`.
 }
 
+/**
+ * Produce a link path. In `custom` network mode it will prepend the rippled entrypoint
+ * @param route
+ * @param params
+ */
 export function buildPath<T>(route: RouteDefinition<T>, params: T) {
   const path =
     (process.env.VITE_ENVIRONMENT === 'custom'
@@ -32,10 +38,32 @@ export function buildPath<T>(route: RouteDefinition<T>, params: T) {
   )
 }
 
+/**
+ * A wrapper for `useRouterParams` that returns a typed object of the routes params
+ * @param route
+ */
 export function useRouteParams<T extends RouteDefinition>(route: T) {
   return useRouterParams<NonNullable<(typeof route)['sampleParams']>>()
 }
 
+export interface LinkProps<
+  T extends RouteDefinition,
+  K extends T['sampleParams'] = T['sampleParams'],
+> {
+  children?: ReactNode
+  to: T
+  params?: K
+  innerRef?: Ref<HTMLAnchorElement>
+  [key: string]: any
+}
+
+/**
+ * A wrapper for `Link` that provides a typed interface for params and uses `buildPath` to build the url/
+ * @param to
+ * @param children
+ * @param params
+ * @param rest All other parameters pass through
+ */
 export function ExplorerLink<T extends {} = {}>({
   to,
   children,