adverse-sapphire

How do I use Non-Nested Routes in File-based router?

I'm building an application where we want to keep a lot of information as path params. Mostly there is no route nesting. All of the routes are supposed to render directly after our auth layout. While we are at 1 level of nesting everything was working well with the _ suffix. E.g. _auth/accounts_/$accountId/projects works well. The issue begins when I want to render with even more nesting. e.g. _auth/accounts_/$accountId/projects_/$projectId I've tried various variations of where to place suffixes but it never ends up working, and I havne't been able to find multiple suffix example on the docs. Visiting the above mentioned page projectId page throws: Invariant failed: Could not find an active match from "/_auth/projects/$projectId" My folder structure is: <image> With rest of protected routes inside of the _auth folder.

12 Replies

quickest-silver•11mo ago

you'd need to suffix some files with .index.tsx, by default they are treated like route.tsx, so they nest I need to see your entire route tree to give you an example though, so, can you take a screenshot with all route folders open?

adverse-sapphireOP•11mo ago

Sure, I've done like 10 different variations with them so currently its a bit messy.

adverse-sapphireOP•11mo ago

What is the usual pattern to follow to avoid this pitfall? If its more readable:

    | '__root__'
    | '/_auth'
    | '/login'
    | '/register'
    | '/_auth/accounts'
    | '/_auth/accounts_/$accountId/projects'
    | '/_auth/accounts_/$accountId/projects_/$projectId/scenarios'
    | '/_auth/accounts_/$accountId/projects_/$projectId/'

    | '__root__'
    | '/_auth'
    | '/login'
    | '/register'
    | '/_auth/accounts'
    | '/_auth/accounts_/$accountId/projects'
    | '/_auth/accounts_/$accountId/projects_/$projectId/scenarios'
    | '/_auth/accounts_/$accountId/projects_/$projectId/'

quickest-silver•11mo ago

either, suffix all routes by default with .index.tsx or use folders and index.tsx. An example with your routes would be

- _auth/
  - route.tsx // Layout route, everything under this nests, replacement for `_auth.tsx`
  - accounts/
    - index.lazy.tsx
    - $accountId/
      - projects/
        - index.lazy.tsx
        - $projectId/
          - index.lazy.tsx
          - scenarios/
            - index.lazy.tsx

- _auth/
  - route.tsx // Layout route, everything under this nests, replacement for `_auth.tsx`
  - accounts/
    - index.lazy.tsx
    - $accountId/
      - projects/
        - index.lazy.tsx
        - $projectId/
          - index.lazy.tsx
          - scenarios/
            - index.lazy.tsx

this causes a lot of nested folders though, so you could combine them for example. you could do scenarios.index.lazy.tsx instead of that scenarios/ folder wait, nevermind, I am dumb you wanted accounts and projects to be indexes too i fixed the above example keep in mind that /accounts will not match on /accounts/$accountId in case you need that if you want that route to match, you can add a route.tsx, next to the index.tsx file, with empty options (ex. const Route = createFileRoute("/some-path/here")(), this is valid and will nest, but will work like it just renders an <Outlet />)

adverse-sapphireOP•11mo ago

Thanks a lot. This helps. I've tried to implement my own thing by the provided pattern but I failed. Then I copied the suggested solution fully and it still fails: Invariant failed: Could not find an active match from "/_auth/accounts/$accountId/projects/$projectId/" The difference is the slash at the end. It really feels impossible to reuse path without nesting 😅 Actually it cant match:

const route = getRouteApi("/_auth/accounts/$accountId/projects/$projectId/");

const route = getRouteApi("/_auth/accounts/$accountId/projects/$projectId/");

On: https://localhost:52774/accounts/1/projects

quickest-silver•11mo ago

I mentioned this above, with index.tsx you will get no match for that route, you will have to add an empty route.tsx

adverse-sapphireOP•11mo ago

That was my bad

quickest-silver•11mo ago

for example, if you have paths:

accounts.index.tsx //  /accounts
accounts.projects.index.tsx //  /accounts/projects

accounts.index.tsx //  /accounts
accounts.projects.index.tsx //  /accounts/projects

/accounts will not match on /accounts/projects

adverse-sapphireOP•11mo ago

It was wrong route for the getRouteApi, I wanted to match _auth/accounts/$accountId/projects

quickest-silver•11mo ago

i see

adverse-sapphireOP•11mo ago

I probably intelisenessed the wrong one

quickest-silver•11mo ago

regardless, keep the above in mind

accounts.route.tsx //  /accounts but with empty route options
accounts.index.tsx //  /accounts
accounts.projects.index.tsx //  /accounts/projects

accounts.route.tsx //  /accounts but with empty route options
accounts.index.tsx //  /accounts
accounts.projects.index.tsx //  /accounts/projects

now /accounts will match on /accounts/projects you can also use just accounts.tsx as that's the same as accounts.route.tsx

Gaming

Programming

How do I use Non-Nested Routes in File-based router?

Did you find this page helpful?