{"record":{"id":"79e47f0c7e2a1dae","repo":"vuejs/vue-router","slug":"named-route-route-name-has-a-default-child-ro","errorCode":null,"errorMessage":"Named Route '${route.name}' has a default child route. When navigating to this named route (:to=\"{name: '${route.name}'}\"), the default child route will not be rendered. Remove the name from this route and use the name of the default child route for named links instead.","messagePattern":"Named Route '(.+?)' has a default child route\\. When navigating to this named route \\(:to=\"(.+?)\"\\), the default child route will not be rendered\\. Remove the name from this route and use the name of the default child route for named links instead\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/create-route-map.js","lineNumber":127,"sourceCode":"    props:\n      route.props == null\n        ? {}\n        : route.components\n          ? route.props\n          : { default: route.props }\n  }\n\n  if (route.children) {\n    // Warn if route is named, does not redirect and has a default child route.\n    // If users navigate to this route by name, the default child will\n    // not be rendered (GH Issue #629)\n    if (process.env.NODE_ENV !== 'production') {\n      if (\n        route.name &&\n        !route.redirect &&\n        route.children.some(child => /^\\/?$/.test(child.path))\n      ) {\n        warn(\n          false,\n          `Named Route '${route.name}' has a default child route. ` +\n            `When navigating to this named route (:to=\"{name: '${\n              route.name\n            }'}\"), ` +\n            `the default child route will not be rendered. Remove the name from ` +\n            `this route and use the name of the default child route for named ` +\n            `links instead.`\n        )\n      }\n    }\n    route.children.forEach(child => {\n      const childMatchAs = matchAs\n        ? cleanPath(`${matchAs}/${child.path}`)\n        : undefined\n      addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)\n    })\n  }","sourceCodeStart":109,"sourceCodeEnd":145,"githubUrl":"https://github.com/vuejs/vue-router/blob/680ccc68c506cca9be6207745043245d61fa715a/src/create-route-map.js#L109-L145","documentation":"A named route that has a default child route (a child whose path is '' or '/') triggers this warning because navigating by the parent's name will not render the default child — the parent record's own (usually empty) rendering wins. vue-router advises naming the default child instead.","triggerScenarios":"Config like { path: '/parent', name: 'parent', children: [{ path: '', component: Default }] } and then navigating to { name: 'parent' } or <router-link :to=\"{ name: 'parent' }\">.","commonSituations":"Index/default child patterns in layouts; migrating from flat routes to nested ones while keeping the parent's name; named links generated from a route table.","solutions":["Remove the name from the parent route and put it on the default child: { name: 'parent' } on the '' path child","Update all :to=\"{ name: ... }\" links to use the child's name","Give the child an explicit path like 'default' if index semantics aren't needed","Or add a redirect on the parent to the child path"],"exampleFix":"// before\n{ path: '/parent', name: 'parent', component: Parent, children: [{ path: '', component: Default }] }\n// after\n{ path: '/parent', component: Parent, children: [{ path: '', name: 'parent', component: Default }] }","handlingStrategy":"validation","validationCode":"routes.forEach(r => {\n  if (r.name && Array.isArray(r.children) && r.children.some(c => /^\\/?$/.test(c.path))) {\n    const def = r.children.find(c => /^\\/?$/.test(c.path))\n    r.name = undefined\n    def.name = def.name || r.path.replace(/^\\//, '')\n  }\n})","typeGuard":"function hasDefaultChildWithName(r) {\n  return Boolean(r.name) && Array.isArray(r.children) && r.children.some(c => /^\\/?$/.test(c.path))\n}","tryCatchPattern":null,"preventionTips":["Put the route name on the default ('' or '/') child, not the parent","Search codebases for :to=\"{ name: parentName }\" links after refactoring nests","Or give the parent a redirect to the child path instead of a name"],"tags":["vue-router","routing","nested-routes","named-routes"],"backgroundTag":"named-route-default-child","analyzedSha":"680ccc68c506cca9be6207745043245d61fa715a","analyzedAt":"2026-09-02T19:19:01.204Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}