T
TanStack•2y ago
xenophobic-harlequin

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>
  }
  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>
  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.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?