Add special compiler-replaced variable to get path to current route

[kentcdodds]

Let's say I've got a full-stack component:

// app/routes/resources/hello.tsx
export async function loader() {
  return json({ data: 'hello' })
}

export function GetHello() {
  const fetcher = useFetcher()
  return (
    <div>
      <button onClick={fetcher.load('/resources/hello')}>Get hello</button>
      {fetcher.data}
    </div>
  )
}

The '/resources/hello' string is problematic in this case because I could rename the file and forget to update the string.

How about a "variable" that is swapped at compile time with the path to the route that is only usable within route files:

<button onClick={fetcher.load(__ROUTE_PATH__)}>Get hello</button>

[penspinner]

Huge +1 on this. In addition to this, it would be nice if the bundler could add a __ROUTE_ID__ to each route too for easier useMatches or useRouteLoaderData when it's available in Remix.

// app/routes/_auth.tsx
export const useAuthLoaderData = () => {
  const authMatch = useMatches().find(({ id }) => id === __ROUTE_ID__)
  // const authLoaderData = useRouteLoaderData(__ROUTE_ID__)
  // return authLoaderData

  if (!authMatch) {
    throw new Error('Unable to find auth in the url matches.')
  }

  return authMatch.data as SerializeFrom<typeof loader>
}

[kentcdodds]

That sounds great too!

I think it's important that a really helpful error message is thrown when trying to use these outside a route module.

[WillSmithTE]

Is this possible yet? Would love to do this, the '/resources/hello' scares me. Google search just led me here

[amogower]

Please accept this proposal 🙏 both suggested compiler-replaced variables would be incredibly useful!

[cmawhorter]

FWIW, I'm coming to remix after evaluating astro, which sort of has this feature via the Astro.params global.

IMO astro's implementation has a lot of weird edge case baggage like using it outside of the context of an astro layout, and I'd end up having to do a similar brittle work around as OP mentioned here. At least that was how it was when I looked last.

Apart from that, I do quite like how astro allows you to access the various route segments and params directly instead of needing to parse it from a static string. But maybe that preference stems from my remix noobness.