T
TanStack•2y ago
harsh-harlequin

Pathless directory is exposing itself!!!

here my features directory was _features ! But it's being rendered as normal path features in nested path for employees!
No description
18 Replies
harsh-harlequin
harsh-harlequinOP•2y ago
src/routes ├── about │ ├── index.css │ └── index.lazy.tsx ├── employee │ ├── _features │ │ ├── cart │ │ │ ├── index.css │ │ │ └── index.tsx │ │ ├── customers │ │ │ ├── index.css │ │ │ └── index.tsx │ │ ├── dashboard │ │ │ ├── index.css │ │ │ └── index.tsx │ │ ├── inventory │ │ │ ├── index.css │ │ │ └── index.tsx │ │ ├── services │ │ │ ├── index.css │ │ │ └── index.tsx │ │ └── tracker │ │ ├── index.css │ │ └── index.tsx │ ├── _features.tsx │ ├── forgot │ │ ├── index.css │ │ └── index.lazy.tsx │ ├── login │ │ ├── index.css │ │ └── index.lazy.tsx │ └── register │ ├── index.css │ └── index.lazy.tsx ├── index.css ├── index.lazy.tsx └── __root.tsx My route Dir!! Why is this thing happening! 😭??? Is there anyone to help???
fair-rose
fair-rose•2y ago
You want the URLs to be /employee/card, right? How does your tsr.config.json look like?
equal-aqua
equal-aqua•2y ago
please provide a minimal complete example on stackblitz.com
harsh-harlequin
harsh-harlequinOP•2y ago
yes when i do nesting its becomes /employee/features/cart but i want /employee/cart or anything that goes in the features dir!
harsh-harlequin
harsh-harlequinOP•2y ago
harsh-harlequin
harsh-harlequinOP•2y ago
looks at the root page @Manuel Schiller it's not hiding the pathless route! { "routesDirectory": "./src/routes", "generatedRouteTree": "./src/routeTree.gen.ts", "routeFileIgnorePrefix": "-", "quoteStyle": "single" } i also think that maybe thhere is a relationship with this error
fair-rose
fair-rose•2y ago
Looks like a bug to me. If the file _features.tsx is in /src/routes/_features.tsx it works. If the file _features.tsx is in /src/routes/something/_features.tsx it does not work. I did some more testing as this works in my applications, but not in the StackBlitz. I now took the simplest example StackBlitz from the docs, moved some files and ran tsr generate. The problem: If a layout file (_layout.tsx) is in a subfolder (routes/some-subfolder/_layout.tsx), the layout will only get removed from the url if the subfolder is a route node (= if either routes/some-subfolder.tsx or routes/some-subfolder/route.tsx exists). The reason for this seems to be that TSR sees that some-subfolder is no route itself, so it just prefixes the path of it's children with /some-subfolder, which causes the prefix underscore _ to be ignored. @Rahat Bin Taleb This is actually the problem in your reproduction example. Adding routes/employee.tsx fixes your problem. However, I found another bug with the router cli / vite-plugin: Adding routes/some-subfolder.tsx as described above and running tsr generate once, will not update the nested _layout route. Running tsr generate a second time without changing anything in the code correctly generates the routeTree. This happens both with @tanstack/router-cli and the Vite plugin and can be noticed in the reproduction example above. (Add routes/employee.tsx and run npx @tanstack/router-cli generate once, open routeTree.gen.ts and run generate again. Notice how the file changes.) For the first problem (subfolder is no node itself) the related code is here: https://github.com/TanStack/router/blob/main/packages/router-generator/src/generator.ts For the second problem (tsr generate not being deterministic) I unfortunately have no idea, why this happens.
equal-aqua
equal-aqua•2y ago
@SimonEdelmann great analysis, can you please create a GitHub issue to track this? or even better, can you provide a PR to fix this?
fair-rose
fair-rose•2y ago
@Manuel Schiller I will create an issue (actually two for the two issues) tomorrow! PR I will try, but I am not sure if I fully understand the code (yet). By the way: @Manuel Schiller I came across another question regarding layout routes. How should a file _layout.foo/bar.tsx be handled? Is this a route /bar or /foo/bar?
equal-aqua
equal-aqua•2y ago
why would it be just /bar?
fair-rose
fair-rose•2y ago
I had some strange results during testing, but probably due to the other bug. But in the end I couldn’t reproduce it again. I agree, it should be /foo/bar! 👍 Thanks!
fair-rose
fair-rose•2y ago
https://github.com/TanStack/router/issues/1174
GitHub
[File-based-router] Layout nested in subfolder · Issue #1174 · TanS...
Describe the bug Discussed in Discord... If a layout file (_layout.tsx) is in a subfolder (routes/some-subfolder/_layout.tsx), the layout will only get removed from the url if the subfolder is a ro...
fair-rose
fair-rose•2y ago
https://github.com/TanStack/router/issues/1175
GitHub
[File-based-router] Changing layout routes => wrong routeTree.gen.t...
Describe the bug When a layout file route (_layout.tsx) gets changed*, the cli generates a wrong routeTree.gen.ts on the first run only. (Same happens for the Vite plugin) *This happens e.g. when a...
fair-rose
fair-rose•2y ago
@Manuel Schiller During writing the second issue, I realized that this always happens when the cli needs to fix a route's file. So for example if you change the path in createFileRoute('/change-me'), the cli needs to fix that. But for generation of routeTree.gen.ts this "fixes" does not get reflected properly. I edited the issue (#1175) to describe that.
harsh-harlequin
harsh-harlequinOP•2y ago
Thanks a lot for all your help and error solving! But For my case even if i run 100 times also that npx generate routes! Still it shows the content of /employee.tsx that i created recently instead of rendering the proper content!
harsh-harlequin
harsh-harlequinOP•2y ago
but your number1 problem solution worked but your 2nd problem solution is not working for me!
No description
harsh-harlequin
harsh-harlequinOP•2y ago
no matter what i do it matches the route correctly but shows this!
No description
harsh-harlequin
harsh-harlequinOP•2y ago
import { createFileRoute } from "@tanstack/react-router";
import { Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/employee")({
  component: () => <Outlet />,
});
import { createFileRoute } from "@tanstack/react-router";
import { Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/employee")({
  component: () => <Outlet />,
});
Besides adding employee.tsx one also need to add the Outlet too to make it work inspite of employee.tsx is not a pathless route! Then It will work! I fixed it by my own! @SimonEdelmann Thanks once again! For the help!

Did you find this page helpful?