framework7io/framework7 · error · Error

Framework7: error constructing route URL from passed params:

Error message

Framework7: error constructing route URL from passed params:\nRoute: ${path}\n${error.toString()}

What it means

`constructRouteUrl` compiles the route path with path-to-regexp's `compile` and fills it with the provided params. If `toUrl(params)` throws (e.g. an expected param is missing or has an invalid type for the pattern), the original error is wrapped and rethrown with the route path and `error.toString()` included.

Source

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

    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) {
      if (typeof query === 'string') url += `?${query}`;
      else if (Object.keys(query).length) url += `?${serializeObject(query)}`;
    }

    return url;
  }

  findTabRouteUrl(tabEl) {
    const router = this;
    const $tabEl = $(tabEl);
    const parentPath = router.currentRoute.route.parentPath;
    const tabId = $tabEl.attr('id');
    const flattenedRoutes = router.flattenRoutes(router.routes);

View on GitHub (pinned to 6557591266)

Solutions

1. Read the inner error in the message (after \nRoute:) to see which param failed
2. Supply all required params for the route's dynamic segments
3. Fix param key names to match the route template exactly
4. Guard the call: build params and verify required keys before generateUrl/navigate

Example fix

// before
router.navigate({ name: 'user', params: {} }); // route: /user/:id/

// after
router.navigate({ name: 'user', params: { id: 42 } });

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

function hasRequiredParams(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 (/error constructing route URL/.test(e.message)) {
    console.error('Bad params for route path:', e.message.split('\n').slice(1).join(' '));
  } else throw e;
}

When it happens

Trigger: Navigating/generating a URL for a route like `/user/:id/` while omitting `id` in params, or passing params that fail the path template's expectations during compile-time substitution.

Common situations: Params object built dynamically where a key is undefined; renamed params in routes without updating callers; nested route params not propagated down.

Related errors

• Framework7: "name" or "path" parameter is required
• Framework7: route with name "${name}" not found
• Framework7: route with path "${path}" not found
• Framework7: can't construct URL for route with name "${name}
• 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/e32aeda165535719. Report an issue: GitHub.