Route only works on hard refresh - am i working against the framework?

[MadsBuchmann]

Hi - i'm new to Remix but i really like it so far!
But i do not know whether this is me working against the framework or i'm experiencing a bug.

Scenario

In my application i have a route deliveries.$deliveryType.tsx that i want to go to whenever a user clicks a link. But i do not know which delivery types exist when the user clicks the link - and fetching them is a very slow as the request i have to make also returns a bunch of other information i need for the child routes. So doing it up front is not an option - i want to post-pone the fetch as much as possible.

Solution

So my solution have been to define a deliveries.tsx route which uses useNavigate to go to the child route once the delivery types are known as follows:

import { LoaderFunctionArgs } from "@remix-run/node";
import { isRouteErrorResponse, json, Outlet,  useLoaderData, useNavigate, useRouteError } from "@remix-run/react";
import { useEffect } from "react";

export const loader = async () => {
  const deliveries = await getAllDeliveries(); // A huge object that has a ton of information needed below, but also informs me about which delivery types exist. 
  return json({ deliveries });
}

export default function DeliveryPage() {
  const { deliveries } = useLoaderData<typeof loader>()
  const navigate = useNavigate(); 

  // Navigate to route: deliveries.$type.tsx
  useEffect(() => {
     const deliveryTypes = getUniqueDeliveryTypes(deliveries);
      navigate(`/deliveries/${deliveryTypes[0]}`, { "replace": true });
    }
  }, []); 


  return <>
    <h1>Delivery Page!</h1>
    {/* Pass deliveries to be consumed by children to avoid re-fetching it */}
    <Outlet context={deliveries} /> 
  </>
}

The route delieveries.$deliveryType.tsx just contains the following for now:

export default function DeliveryTypes {
    return <h1>Hello from delivery types!</h1>
}

Problem with solution

The above actually navigates to the route in the browser, changing the url to: localhost:5173/deliveries/bicycle but it returns a 404 page and a warning telling me:

{ status: 404, statusText: "Not Found", internal: true, data: 'Error: No route matches URL "/deliveries/bicycle"', error: Error }

But if i do a hard-refresh the page loads just fine! So i do not know if i'm doing something wrong or i'm experiencing a bug.

Best,
Mads

[akomm]

Remaining in the context of the solution you try:
You should rather use shouldrevalidate
In combination with use-route-loader-data

No navigate and Outlet context needed then.

Bear in mind, useRouteLoaderData only works when the route is active, like in your example.

Though if I was you, I would rather look forward to solve the complexity of getAllDeliveries. If you can't change the queries, then use server- or client memoization maybe and then just return the parts needed on the routes.

[MadsBuchmann]

Thank you for the answer, i'll look into these. I'm however unsure how i would put these together, to achieve a navigation to deliveries/bicycle when i click the link without using navigate.

[akomm]

Was unclear what link you click. Then you would need navigate but no outlet. Though I'm puzzled as to why you navigate to some random first.

You can safe yourself the navigate when you memoize the data and just return the data needed at the right place. This way you can directly link to the directly URL instead of navigate.

I can't reproduce the 404 btw, I assume the reason is outside the provided code.

[MadsBuchmann]

Just tried recreating it myself here as suggested by @gustavopch: https://stackblitz.com/edit/remix-run-remix-vgf3zmj5?file=app%2Froutes%2Fdeliveries.tsx,app%2Froutes%2F_index.tsx,app%2Froutes%2Fdeliveries.%24type.tsx

And i can't get it to reproduce in a code-sandbox either. I'll dig further into what may cause it, because my code is identical to what is going on in the sandbox just with actual api calls instead.

[akomm]

I did reproduce it, you need to make sure routes are "undiscovered" and it seems the lazy discovery causes 404:
#10327 (comment)

[gustavopch]

It will be easier to help you if you provide a repro via https://remix.new.

[MadsBuchmann]

Coming right up - two seconds :)

[MadsBuchmann]

https://stackblitz.com/edit/remix-run-remix-vgf3zmj5?file=app%2Froutes%2Fdeliveries.tsx,app%2Froutes%2F_index.tsx,app%2Froutes%2Fdeliveries.%24type.tsx

Thanks for the suggestion - i can't seem to recreate it in the sandbox. But my local code is identical just with an actual api call instead.

So as @akomm pointed out - something outside of the code may be giving me troubles. I'll try to dig deeper.

[akomm]

The 404 comes probably due to v3_lazyRouteDiscovery
Reproduction stackblitz

It is important, before navigating to reload the page fully as shown in the video, because then the route is "undiscovered" again:
10327.webm

[MadsBuchmann]

This is the exact behaviour i'm experiencing! I'll try to turn it off in my app to see if this is what causes it.
Thanks a ton for your effort!

[MadsBuchmann]

Turned it off and now everything works as i would expect. I'm gonna keep it off while i learn a bit more about lazy route discovery.

[akomm]

I'd guess it might be a bug. I did not test lazy route discovery yet, neither did I read the docs. I'd look into it when I need it.