{"id":12929,"library":"build-route-tree","title":"Typed Route Tree Builder","description":"build-route-tree is a JavaScript/TypeScript library designed to create strongly typed route trees, significantly reducing errors associated with magic strings in URL paths. It provides a structured, object-oriented approach to defining application routes, enabling IDE autocompletion and compile-time validation for paths and parameters. Currently at version 1.0.3, the library appears to follow a release cadence driven by feature additions and bug fixes, typical for a new utility. Its key differentiator is the focus on full type inference for route paths and parameters, offering methods like `getRoutePath`, `getRedirectPath`, and `getElementKey` on each route node to retrieve path components and construct dynamic URLs safely. This helps encapsulate route logic and improve maintainability compared to manual string interpolation or less type-safe routing solutions.","status":"active","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/fullstack-development/build-route-tree","tags":["javascript","router","route","typescript"],"install":[{"cmd":"npm install build-route-tree","lang":"bash","label":"npm"},{"cmd":"yarn add build-route-tree","lang":"bash","label":"yarn"},{"cmd":"pnpm add build-route-tree","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is the primary default export function for building the route tree.","wrong":"import { buildRouteTree } from 'build-route-tree';","symbol":"buildRouteTree","correct":"import buildRouteTree from 'build-route-tree';"},{"note":"A named export utility function used to mark dynamic route segments within the tree definition.","wrong":"import getParam from 'build-route-tree';","symbol":"getParam","correct":"import { getParam } from 'build-route-tree';"}],"quickstart":{"code":"import buildRouteTree, { getParam } from 'build-route-tree';\n\ninterface UserRouteParams { uuid: string; }\n\nconst rawTree = {\n  home: {\n    loans: {},\n    user: {\n      uuid: getParam<UserRouteParams>(), // Define 'uuid' as a dynamic parameter\n      security: {\n        '2fa': {},\n        sms: {},\n      },\n      balances: {},\n    },\n  },\n  preview: {},\n};\n\nconst routes = buildRouteTree(rawTree);\n\n// Example usage:\nconsole.log(routes.home.loans.getRoutePath()); // e.g., \"/home/loans\"\nconsole.log(routes.home.user.security['2fa'].getRoutePath()); // e.g., \"/home/user/security/2fa\"\n\n// Accessing a dynamic route\nconst userProfilePath = routes.home.user.uuid.getRedirectPath({ uuid: '123-abc-456' });\nconsole.log(userProfilePath); // e.g., \"/home/user/123-abc-456\"\n\n// Accessing methods on a dynamic segment parent\nconst userSecurity2fa = routes.home.user.uuid.security['2fa'].getRedirectPath({ uuid: 'test-user-id' });\nconsole.log(userSecurity2fa); // e.g., \"/home/user/test-user-id/security/2fa\"\n","lang":"typescript","description":"Demonstrates how to define a typed route tree using `buildRouteTree` and `getParam` for dynamic segments, then accessing its generated paths and constructing dynamic URLs safely."},"warnings":[{"fix":"Always call `getRoutePath()` or `getRedirectPath(params)` on the route node to obtain the correct string path.","message":"Attempting to use a route object directly as a string (e.g., `<Link to={routes.home.loans} />`) will result in a runtime error or an incorrect path. Route nodes are objects with methods.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `getParam()` is assigned as the value to any route property that should represent a dynamic segment (e.g., `uuid: getParam<UserParams>()`).","message":"The `getParam` function is crucial for defining dynamic segments. If a route segment is intended to be dynamic (e.g., `/users/:id`), but `getParam()` is not used, the segment will be treated as a literal string in the path, and `getRedirectPath` will not accept parameters for it.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pass an object to `getRedirectPath` containing all necessary dynamic keys and their corresponding values, matching the `getParam` definitions higher up the route chain.","message":"When using `getRedirectPath`, ensure that all dynamic parameters for the path segment you are trying to construct are provided in the argument object. Missing parameters will result in parts of the path being undefined or incorrect.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Call the appropriate path generation function, such as `.getRoutePath()` for static paths or `.getRedirectPath({ param: value })` for dynamic paths, on the route node.","cause":"Trying to pass a route tree object or a specific route node object directly where a string path is expected (e.g., to a `Link` component's `to` prop).","error":"TS2345: Argument of type '{ home: { loans: {}; user: { uuid: Function; ... }; }; preview: {}; }' is not assignable to parameter of type 'string'."},{"fix":"For dynamic routes defined with `getParam`, `getRedirectPath` is typically called on a *parent* node, or if `getParam` is at the end, it's the function that takes the params. Re-evaluate where dynamic parameters are expected and call `getRedirectPath` at the correct level, passing all required parameters for that path segment.","cause":"Attempting to call `getRedirectPath` directly on a route segment that itself is defined by `getParam()`. `getParam` makes the *parent* able to generate a path with parameters, or makes the node itself a 'param-accepting' function, not a direct object with methods in the returned tree.","error":"TypeError: routes.home.user.uuid.getRedirectPath is not a function"},{"fix":"The `uuid` property, when defined with `getParam`, becomes the entry point for dynamically constructing the path. You should call `getRedirectPath` on the parent (`routes.home.user`) or a descendant (`routes.home.user.uuid.security['2fa']`) and provide the `uuid` value in the parameters object.","cause":"Incorrectly attempting to access a dynamic route segment (e.g., `routes.home.user.uuid`) as a fixed property after it has been defined using `getParam`.","error":"Property 'uuid' does not exist on type '{ balances: { getRoutePath: Function; getRedirectPath: Function; getElementKey: Function; }; security: { '2fa': {}; sms: {}; getRoutePath: Function; ... }; getRoutePath: Function; ... }'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}