TanStackT
TanStack•2y ago
developed-pink

How Smelly Is It To Add Components to Router Context?

I'm using nested layouts, but sometimes I need to break out of them. For example, I have a fixed top nav that's is always there. But, on some pages I want to add a save button up there.

  const routerState = useRouterState();
  const lastMatch = routerState.matches[routerState.matches.length - 1];


  const NavComponent = () => {
    return <div>{lastMatch.context.saveButton}</div>
  }


Then, in my components I can do something like this:
  async loader({ context, params }) {
    context.saveButton = <button onClick={() => 'do stuff'}>Save</button>


Is this a huge antipattern? Better ways to do it? Based on my naive testing it works pretty well.
Was this page helpful?