Responsive master detail routes
How can we implement responsive master detail (https://v5.reactrouter.com/web/guides/philosophy/responsive-routes/) routes with file based routing.
Currently, I have following files.
posts -> index.tsx
posts -> $id.tsx
/posts route opens index.tsx loader that fetch data from /api/posts and render list of posts summary. Each summary has link that takes user to /posts/:id
/posts/:id route opens $id.tsx loader that fetches data from /api/posts/:id and renders post detail.
This is great for mobile screens.
For larger screens, if user clicks on posts summary, instead of 'redirecting' to detail page, I want to show post detail on right side of post summary list.
I cannot wrap my head around it with file based routing as routes dynamically change based on screen size.
I tried with:
posts -> route.tsx
posts -> $id.tsx
But it was triggering duplicate API calls and it didn't look clean to me.
Any help is appreciated.
Currently, I have following files.
posts -> index.tsx
posts -> $id.tsx
/posts route opens index.tsx loader that fetch data from /api/posts and render list of posts summary. Each summary has link that takes user to /posts/:id
/posts/:id route opens $id.tsx loader that fetches data from /api/posts/:id and renders post detail.
This is great for mobile screens.
For larger screens, if user clicks on posts summary, instead of 'redirecting' to detail page, I want to show post detail on right side of post summary list.
I cannot wrap my head around it with file based routing as routes dynamically change based on screen size.
I tried with:
posts -> route.tsx
posts -> $id.tsx
But it was triggering duplicate API calls and it didn't look clean to me.
Any help is appreciated.
