Dynamic Segment Ignored

[allan-vera]

So I practically am replicating the example from https://tanstack.com/router/v1/docs/guide/route-paths#dynamic-segments, but my application just goes to the /users route even with my users/$userId route defined.

Here's my code:

const usersRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "users",
  component: UsersPage,
  beforeLoad: (data) => protectRoute(data),
});
export const userDetailRoute = new Route({
  getParentRoute: () => usersRoute,
  path: `$userId`,
  component: UserDetailPage,
  beforeLoad: (data) => protectRoute(data),
});

export const routeTree = rootRoute.addChildren([
  usersRoute.addChildren([userDetailRoute]),
]);

protectRoute just double checks to make sure a user is logged in.

Devtools:

[allan-vera]

Btw this alternative way works as suggested by https://tanstack.com/router/v1/docs/guide/route-paths#inner-path-slashes. Just not sure if this ought to be the way I do it given the previous link's docs.

const usersRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "users",
  component: UsersPage,
  beforeLoad: (data) => protectRoute(data),
});
export const userDetailRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "users/$userId",
  component: UserDetailPage,
  beforeLoad: (data) => protectRoute(data),
});

export const routeTree = rootRoute.addChildren([
  usersRoute,
  userDetailRoute,
]);

This alternative way

[schiller-manuel]

You probably should define a separate usersIndexRoute, similarly to postsIndexRoute in this example: https://tanstack.com/router/v1/docs/examples/react/basic

[allan-vera]

Here's my example:

const usersRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "users",
  component: UsersPage,
  beforeLoad: (data) => protectRoute(data),
});
export const userDetailRoute = new Route({
  getParentRoute: () => usersRoute,
  path: "$userId",
  component: UserDetailPage,
  beforeLoad: (data) => protectRoute(data),
});
export const userIndexRoute = new Route({
  getParentRoute: () => usersRoute,
  path: "/",
  component: UserDetailPage,
  beforeLoad: (data) => protectRoute(data),
});

export const routeTree = rootRoute.addChildren([
  usersRoute.addChildren([userIndexRoute, userDetailRoute]),
]);

This is me at "users/2"

[allan-vera]

And this is when I am at "users/"

[allan-vera]

Not sure how much it matters but I've noticed that in both scenarios (dynamic segments and inner path slashes) My images ( <Image src={"imgs/example.svg"} width="auto" height={12} /> ) break.

[schiller-manuel]

Can you put the example up on e.g. codesandbox or a git repo? Trying to guess from some screenshots is not so great.
However, it looks like the routing works as expected?
users/2 => users/$userID
users/ => users/

What's the actual issue?
Is it that UserDetailPage is used in both routes?
How about:

const usersRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "users",
});
export const userDetailRoute = new Route({
  getParentRoute: () => usersRoute,
  path: "$userId",
  component: UserDetailPage,
  beforeLoad: (data) => protectRoute(data),
});
export const userIndexRoute = new Route({
  getParentRoute: () => usersRoute,
  path: "/",
  component: UsersPage,
  beforeLoad: (data) => protectRoute(data),
});

About your images: You probably need absolute paths, e.g. "/imgs/example.svg" (leading slash!)

[allan-vera]

I could. But the issue is that UserRouter component (UsersPage) is appearing for both "$userId" and "/" routes. Essentially any component I place for those routes (or any child route for that matter) does not get rendered and instead is shown the UserRoute component.

[allan-vera]

@schiller-manuel I hadn't seen your proposed solution in my email inbox when I first reviewed it. But yeah, your implementation fixed it for me. Thank you!