How do you pass your keys within nested pages?

[MaximilianSchon]

Hi,

We have built quite a large app around SWR as one of our core libraries and it's working quite well. But one thing that is bothering me is that I always have to pass an id prop if I want to have a somewhat reusable component.

And perhaps, this is something which I have to do to avoid other complications, but it bothers me.

Most of our pages (NextJS pages) start with code along the lines of:

const router = useRouter();
const { customerId } = router.query;
const customer = useCustomer(customerId);

With components looking something like:

<InvoicesTab customer={customer} />
<EventLog entityId={customer.customerId} />

Which might just be how we are supposed to use this library (and to be fair, most state management libraries), but it would be far cleaner to use have the code looking like:

<InvoicesTab />
<EventLog />

I realize that I can theoretically move around things using contexts and then getting the ids from the contexts (Like a CurrentCustomerContext, and so on) or creating a useCurrentCustomer-hook (which uses the useRouter hook), but I feel like that might just be a more complex solution which doesn't end up cleaning up the code. Which is why I'd like to get some further (and possibly more experienced) opinions on the question.

How do you solve this problem (if you solve this problem)?