Routes.ts

import { 
  type RouteConfig,
  index,
  route,
  layout
} from "@react-router/dev/routes";

export default [
  layout("layouts/main_layout.tsx", [
    route("dashboard", "routes/dashboard/index.tsx", [
      route("employee", "routes/dashboard/employee/index.tsx", [
        route("add", "routes/dashboard/employee/add/index.tsx")
      ]),
    ]),
    route("*", "routes/not-found.tsx")
  ]),
  layout("layouts/auth_layout.tsx", [
    route("/login", "routes/login.tsx"),
  ])
] satisfies RouteConfig;

./routes/dashboard/employee/add/index.tsx

import EmployeeAddPage from "~/pages/dashboard/employees/Add";

export function meta() {
  return [
    { title: "Dashboard - Employee - Add - Index" },
    { name: "dashboard", content: "Index" },
  ];
}

export default function Index() {
  return <EmployeeAddPage />;
}

export default function EmployeeAddPage() {
  return (
    <div>
      <input name={"trajce"} value={"trajce"} />
      asdasd

      <p>asdasd</p>
    </div>
  )
}

./routes/dashboard/employee/index.tsx

import EmployeeListPage from "~/pages/dashboard/employees/List";

export function meta() {
  return [
    { title: "Dashboard - Employee" },
    { name: "dashboard", content: "Index" },
  ];
}

export default function Index() {
  return <EmployeeListPage />;
}

For some reason the <EmployeeListPage /> component is showing on "/dashboard/employee/add", instead of <EmployeeAddPage />. Is there some limitation to the routing depth, like only the parent and children working, but children's children and so on, not? Is this a bug or I need to configure this or maybe the code is broken?

I see "Dashboard - Employee - Add - Index" on the tab

Issue

It seems that EmployeeListPage rendered on "/dashboard/employee" does not render an Outlet for nested routes to render out their route content, e.g the nested "/dashboard/employee/add" route rendering EmployeeAddPage. The result is that all "/dashboard/employee/*" sub-routes (i.e. paths) are matched by "/dashboard/employee" and only EmployeeListPage is rendered.

Solution Suggestion

If you want only EmployeeListPage to render on "/dashboard/employee", and for only EmployeeAddPage to render on "/dashboard/employee/add", then these should rendered as sibling routes instead of as a parent-child nested route.

Examples:

import {
  index,
  layout,
  prefix,
  route,
  type RouteConfig,
} from "@react-router/dev/routes";

export default [
  layout("layouts/main_layout.tsx", [
    route("dashboard", "routes/dashboard/index.tsx", [
      ...prefix("employee", [
        // "/dashboard/employee"
        index("routes/dashboard/employee/index.tsx"),

        // "/dashboard/employee/add"
        route("add", "routes/dashboard/employee/add/index.tsx"),
      ]),
    ]),
    route("*", "routes/not-found.tsx"),
  ]),
  layout("layouts/auth_layout.tsx", [route("/login", "routes/login.tsx")]),
] satisfies RouteConfig;

import {
  index,
  layout,
  route,
  type RouteConfig,
} from "@react-router/dev/routes";

export default [
  layout("layouts/main_layout.tsx", [
    route("dashboard/employee", "routes/dashboard/index.tsx", [
      // "/dashboard/employee"
      index("routes/dashboard/employee/index.tsx"),

      // "/dashboard/employee/add"
      route("add", "routes/dashboard/employee/add/index.tsx"),
    ]),
    route("*", "routes/not-found.tsx"),
  ]),
  layout("layouts/auth_layout.tsx", [route("/login", "routes/login.tsx")]),
] satisfies RouteConfig;

import {
  layout,
  route,
  type RouteConfig,
} from "@react-router/dev/routes";

export default [
  layout("layouts/main_layout.tsx", [
    route("dashboard", "routes/dashboard/index.tsx", [
      // "/dashboard/employee"
      route("employee", "routes/dashboard/employee/index.tsx"),

      // "/dashboard/employee/add"
      route("employee/add", "routes/dashboard/employee/add/index.tsx"),
    ]),
    route("*", "routes/not-found.tsx"),
  ]),
  layout("layouts/auth_layout.tsx", [route("/login", "routes/login.tsx")]),
] satisfies RouteConfig;