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>
  }

  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.

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>
  }

  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.

How Smelly Is It To Add Components to Router Context?

Similar Threads

How Smelly Is It To Add Components to Router Context?

Similar Threads

Similar Threads

Similar Threads