Nested child-route does not expand the URL

[DevKame]

My router looks like this:
router.ts:

import { createRouter, createWebHistory, RouteRecordRaw, } from "vue-router";
import TheOverview from "./components/static/TheOverview.vue";
import TheProjects from "./components/static/TheProjects.vue";

const routes: Array<RouteRecordRaw> =
[
    {path: "/", name: "root", redirect: {name: "projects"}},
    {path: "/overview", name: "overview", component: TheOverview, children:
        [
            {path: "/projects", name: "projects", component: TheProjects},
        ]},
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

When entering localhost/ i want to redirect to route "projects" which is a child of "overview", so i expect this route to be opened: localhost/overview/projects but only localhost/projects is opened?

why and how do i solve that problem?

[LinusBorg]

remove the leading slash in the child root's path. a leading slash means it should be an absolut path, not a relative one.

Docs: https://router.vuejs.org/guide/essentials/nested-routes.html#Nested-Routes

Note that nested paths that start with / will be treated as root paths. This allows you to leverage the component nesting without having to use a nested URL.