framework7io/framework7 · error · Error

Framework7: can't construct URL for route with name "${name}

Error message

Framework7: can't construct URL for route with name "${name}"

What it means

After finding a named route, `generateUrl` delegates to `constructRouteUrl`, which compiles the route path template with the given params. If `constructRouteUrl` returns an empty/falsy URL (e.g. the path template has required dynamic segments that params failed to fill), this error is thrown.

Source

Thrown at src/core/modules/router/router-class.js:333

    }
    const router = this;
    const route = name ? router.findRouteByKey('name', name) : router.findRouteByKey('path', path);

    if (!route) {
      if (name) {
        throw new Error(`Framework7: route with name "${name}" not found`);
      } else {
        throw new Error(`Framework7: route with path "${path}" not found`);
      }
    }
    const url = router.constructRouteUrl(route, { params, query });

    if (url === '') {
      return '/';
    }

    if (!url) {
      throw new Error(`Framework7: can't construct URL for route with name "${name}"`);
    }
    return url;
  }

  // eslint-disable-next-line
  constructRouteUrl(route, { params, query } = {}) {
    const { path } = route;
    const toUrl = compile(path);
    let url;
    try {
      url = toUrl(params || {});
    } catch (error) {
      throw new Error(
        `Framework7: error constructing route URL from passed params:\nRoute: ${path}\n${error.toString()}`,
      );
    }

    if (query) {

View on GitHub (pinned to 6557591266)

Solutions

1. Pass the required params: `router.generateUrl({ name: 'item', params: { id: 5 } })`
2. Check that param keys in the call match the `:segment` names in the route path
3. Give the dynamic segment a default or make the route path static if params are not needed

Example fix

// before
router.generateUrl({ name: 'item' }); // route: /item/:id/

// after
router.generateUrl({ name: 'item', params: { id: 5 } });

const route = router.findRouteByKey('name', name);
if (!route) throw new Error(`Unknown route: ${name}`);
const required = (route.path.match(/:[^/]+/g) || []).map(s => s.slice(1));
const missing = required.filter(k => !(params || {})[k]);
if (missing.length) throw new Error(`Missing params: ${missing.join(',')}`);

function paramsSatisfyRoute(route, params) {
  const required = (route.path.match(/:[^/]+/g) || []).map(s => s.slice(1));
  return required.every(k => params && params[k] !== undefined);
}

try {
  const url = router.generateUrl({ name, params });
} catch (e) {
  if (/can't construct URL/.test(e.message)) {
    console.error(`Route "${name}" needs params for its dynamic segments`);
  } else throw e;
}

When it happens

Trigger: `router.generateUrl({ name: 'item' })` for a route like `/item/:id/` without supplying `params: { id: 5 }`, so the compiled URL is empty/invalid.

Common situations: Routes with dynamic segments where params were forgotten or misspelled; optional param handling surprises; converting a static navigation call to a dynamic route without updating generateUrl.

Related errors

• Framework7: "name" or "path" parameter is required
• Framework7: route with name "${name}" not found
• Framework7: route with path "${path}" not found
• Framework7: error constructing route URL from passed params:
• Framework7: it is not allowed to use router methods on globa

AI-assisted analysis of framework7io/framework7@6557591266 (2026-09-02). Data as JSON: /api/errors/02f4e23d2197222f. Report an issue: GitHub.