remix 2.0 file structure for a route that needs two layouts

[pappuchai]

app/routes
|__  _pathless.tsx
|__  _pathless.category._index.tsx
|__  _pathless.category.$category.tsx

It works pefectly with the above structure. However I require another layout file for category section. So when I create another file like this

app/routes
|__  _pathless.tsx
|__  _pathless.category._index.tsx
|__  _pathless.category.$category.tsx
|__  _pathless.category.tsx

This doesnt seem to work. First time load on /category and /category/<cat_name> loads the _pathless.category.tsx layout correctly but subsequent navigation to other categories gives "rules of hooks"

Whats the right way to achieve a layout for category inside _pathless.

Update: To give more context,

• _pathless.tsx loads website's header, outlet and footer.
• And within this outlet, I want _pathless.category.tsx to render categoryNav and outlet.
• This outlet will display the products using _pathless.category.$category.tsx route.

Update 2: These are the routes ( using remix-flat-routes )

{
  'routes/_home/_layout': {
    path: undefined,
    index: undefined,
    caseSensitive: undefined,
    id: 'routes/_home/_layout',
    parentId: 'root',
    file: 'routes/_home/_layout.tsx'
  },
  'routes/_home/index/_home': {
    path: undefined,
    index: true,
    caseSensitive: undefined,
    id: 'routes/_home/index/_home',
    parentId: 'routes/_home/_layout',
    file: 'routes/_home/index/_home.tsx'
  },
  'routes/_pathless/_layout': {
    path: undefined,
    index: undefined,
    caseSensitive: undefined,
    id: 'routes/_pathless/_layout',
    parentId: 'root',
    file: 'routes/_pathless/_layout.tsx'
  },
  'routes/_pathless/blogs/_blogs': {
    path: 'blogs',
    index: undefined,
    caseSensitive: undefined,
    id: 'routes/_pathless/blogs/_blogs',
    parentId: 'routes/_pathless/_layout',
    file: 'routes/_pathless/blogs/_blogs.tsx'
  },
  'routes/_pathless/category/_layout': {
    path: 'category',
    index: undefined,
    caseSensitive: undefined,
    id: 'routes/_pathless/category/_layout',
    parentId: 'routes/_pathless/_layout',
    file: 'routes/_pathless/category/_layout.tsx'
  },
  'routes/_pathless/category/$category/_$categoryId': {
    path: ':category',
    index: undefined,
    caseSensitive: undefined,
    id: 'routes/_pathless/category/$category/_$categoryId',
    parentId: 'routes/_pathless/category/_layout',
    file: 'routes/_pathless/category/$category/_$categoryId.tsx'
  },
  'routes/_pathless/category/index/_category': {
    path: undefined,
    index: true,
    caseSensitive: undefined,
    id: 'routes/_pathless/category/index/_category',
    parentId: 'routes/_pathless/category/_layout',
    file: 'routes/_pathless/category/index/_category.tsx'
  }
}

Its working for some clicks, and not working for some other clicks. Looks like some race condition on the client side ? Perfectly getting rendered on initial page load.

[pappuchai]

Layout _pathless.category.tsx has a loader to fetch all categories. Removed the loader and hard coded the categories and it is working now. Need to check why loader in the layout is causing this issue.

[pappuchai]

Closing this. It is not layout issue.