Can not create nested url using router/cli

[tienlx97]

This is my url:
"/" "/document" "/document/category"

• This is routes folder:

__root.jsx
index.jsx
document.jsx
document.index.jsx
document.category.jsx

• This is document.jsx

// document.jsx
import React from "react";
import { FileRoute, Outlet } from "@tanstack/react-router";

export const Route = new FileRoute("/document").createRoute({
  component: DashboardComponent,
});

function DashboardComponent() {
  return <Outlet />;
}

• This is document.index.jsx

import React from "react";
import { FileRoute } from "@tanstack/react-router";

export const Route = new FileRoute("/document/").createRoute({
  component: DocumentIndexComponent,
});

function DocumentIndexComponent() {
  return <div>/document/home</div>;
}

• This is document.category.jsx

// `document.category.jsx
import React from "react";
import { FileRoute } from "@tanstack/react-router";

export const Route = new FileRoute("/document/category").createRoute({
  component: DocumentCategoryComponent,
});

function DocumentCategoryComponent() {
  return <div>/document/category</div>;
}

• This is routeTree.gen

// routeTree.gen
import { Route as rootRoute } from "./routes/__root";
import { Route as DocumentImport } from "./routes/document";
import { Route as DocumentCategoryIndexImport } from "./routes/document.category";
import { Route as DocumentIndexImport } from "./routes/document.index";
import { Route as LoginImport } from "./routes/login";
import { Route as IndexImport } from "./routes";

const LoginRoute = LoginImport.update({
  path: "/login",
  getParentRoute: () => rootRoute,
});

const DocumentRoute = DocumentImport.update({
  path: "/document",
  getParentRoute: () => rootRoute,
});

const IndexRoute = IndexImport.update({
  path: "/",
  getParentRoute: () => rootRoute,
});

const DocumentIndexRoute = DocumentIndexImport.update({
  path: "/",
  getParentRoute: () => DocumentRoute,
});

const DocumentCategoryIndexRoute = DocumentCategoryIndexImport.update({
  path: "/category/",
  getParentRoute: () => DocumentRoute,
});

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  DocumentRoute.addChildren([DocumentIndexRoute, DocumentCategoryIndexRoute]),
  LoginRoute,
]);

[helmturner]

Everything seems to be working as expected here, though I can see where it might be confusing how it's output.

In your routetree.gen, the following two are not equivilent:

const IndexRoute = IndexImport.update({
  path: "/",
  getParentRoute: () => rootRoute,
});

const DocumentIndexRoute = DocumentIndexImport.update({
  path: "/",
  getParentRoute: () => DocumentRoute,
});

The "path" is '/' but what it really means is 'pathsegment' (the actual path you're thinking of - or fullpath as it's called in this lib - would be the combination of path segments. If you add the parent's path (/document) to the documentindex path (/), you get the result I think you're expecting (/document/) - which is what is shown in document.index.jsx.

Note that you have conflicting routes, though: document.jsx and document.index.jsx are ambiguous - they result in the same path.

Since document.jsx is a layout that shouldn't be reflected in the URL path, you probably want this:

__root.jsx
index.jsx
_document.jsx
document.index.jsx
document.category.jsx