Centralizing routes declaration and usage in a React app

solution.ts

const ROUTES = {
  SHIPMENTS: "/shipments",
  SHIPMENT: "/shipments/:id",
};

interface RouteParams {
  SHIPMENT: { id: number };
}

type Routes = typeof ROUTES;
type Route = keyof Routes;
type DynamicRoute = keyof RouteParams;
type StaticRoute = keyof Omit<Routes, keyof RouteParams>;
  
interface BuildPath {
  <T extends DynamicRoute>(route: T, params: RouteParams[T]): string;
  <T extends StaticRoute>(route: T): string;
}
    
const buildPath: BuildPath = (route: Route, params: any = {}) => {
  const routeElements = ROUTES[route].split("/");
  
  return routeElements.reduce((prevElement, currentElement) => {
    const nextElement = currentElement.startsWith(":")
      ? params[currentElement.slice(1)]
      : currentElement;
    return `${prevElement}/${nextElement}`;
  });
};