ambitious-aqua

Split screen routes

What is the preffered way to create an overview screen of lets say 'events' and a detail screen for said event that shows on the right of the overview when on route /events i want the whole page to show a list of the events. But navigating to an events goes to events/$eventId but is shown next to the overview. what i did now is this folder structure

/events
  -table.tsx
  $eventId.tsx (import -table.tsx here as well, but in a grid)
  index.tsx (import -table.tsx here)

/events
  -table.tsx
  $eventId.tsx (import -table.tsx here as well, but in a grid)
  index.tsx (import -table.tsx here)

Problem with this approach for me is im using useParams('') inside the table since this url is has a param inside i want to use. The actual route is clients/$clientId/events so i want to fetch all events from that client. What i do in table is const params = useParams('/clients/$clientId/events') but this throws an error when on /events/$eventId Invariant failed: Could not find an active match from "/clients/$clientId/events/" Is there an easier way to get this sort of layout?

16 Replies

xenial-black•3mo ago

move the table into /events/route.tsx

ambitious-aquaOP•3mo ago

Thought of that as well, didnt test it yet but what should i add in index.tsx? thats just an empty file than?

xenial-black•3mo ago

you wouldn't need that then. unless you need different content on the index view

ambitious-aquaOP•3mo ago

hm another issue, i also have another route where i don't want this 😛

/events
  index.tsx
  $eventId.tsx
  kanban.tsx

/events
  index.tsx
  $eventId.tsx
  kanban.tsx

maybe im just going for a shared component with props i need to pass in unless theres a better way

xenial-black•3mo ago

if you can provide a minimal example based on one of the Stackblitz examples i can have another look

ambitious-aquaOP•3mo ago

https://stackblitz.com/edit/tanstack-router-vxrrhpnm?file=src%2Froutes%2F%24clientId%2Ftasks%2F-table.tsx

Andre de Waard

StackBlitz

Router Basic File Based Example (duplicated) - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

ambitious-aquaOP•3mo ago

a reading this https://tanstack.com/router/latest/docs/framework/react/api/router/useParamsHook gave me the idea that useParams should work on child routes and gave me the idea that i was doing something wrong (because its a child route) the fix was to acually use remove the last / since that is the index route const params = useParams({ from: '/$clientId/tasks' });

useParams hook | TanStack Router React Docs

The useParams method returns all of the path parameters that were parsed for the closest match and all of its parent matches. useParams options The useParams hook accepts an optional options object. o...

xenial-black•3mo ago

yep you can supply a parent that has the param

ambitious-aquaOP•3mo ago

does the example makes sense to you or am i doing something really weird?

xenial-black•3mo ago

you could also just pass on the path param as a react prop to the component

ambitious-aquaOP•3mo ago

yes indeed but it will lose the type hinting inside the actual component. its like using useParams({ strict: false }) which makes clientId optional

xenial-black•3mo ago

why?

ambitious-aquaOP•3mo ago

This is what you meant?

export function ClientTable({from}: { from: string }) {
  const params = useParams({ from });

export function ClientTable({from}: { from: string }) {
  const params = useParams({ from });

xenial-black•3mo ago

no I meant passing the actual param value

ambitious-aquaOP•3mo ago

o you mean the clientId like so

export function ClientTable({ clientID} : { clientID: string }) {
// use client id

export function ClientTable({ clientID} : { clientID: string }) {
// use client id

xenial-black•3mo ago

yes

Gaming

Programming

Split screen routes

Did you find this page helpful?