Dynamic route does absolutely nothing, doesn´t even trigger loader function.

[Placentra]

Hello, I have been trying to solve this for a few weeks now, but unfortunately without success, even though I believe this is gonna be really easy.

Basicaly I´m using react router, everything works fine. No problems at all. Unless I try to visit one of the routes which contains dynamic segment directly from a link.

This is the route configuration:

THIS IS THE LINK:
http://localhost:5173/event/33-Integer_aliquet%2C_massa_id_lobortis_convallis%2C_tort

The link works without any issues, if its being redirected to from app like this:
navigate(/event/${event.id}-${encodeURIComponent(event.title.slice(0, 50)).replace(/%20/g, '_')});

AGAIN - just to make sure - EVERYTHING WORKS WITHOUT ANY ISSUES.
however, if I visi EXACTLY THE SAME LINK DIRECTLY after opening new browser tab for example:
http://localhost:5173/event/62-Pellentesque_at_nulla._Suspendisse_potenti.

All I get is this:

IT DOESN´T PING THE SERVER, IT DOESN´T EVEN TRIGGER THE FRONTEND LOAD. Its just completely dead within a milisecond. I really have no idea what to do anymore and I would greatly appreciate some advise. I repeat, everything works as long as the frontend loads (by visiting the index route). The path with dynamic segment works only if using useNavigate after app has been loaded. As soon as its visited directly, its completely dead. No bug, no console log error. no server request, no response. NOTHING. Other child routes work if I visit them directly. but for some reason the route with dynamic segment is completely dead if visited directly.
---> these routes all work if visited directly

if

[kiliman]

Here's a simple StackBlitz that works fine with dynamic params.

⚡️ https://stackblitz.com/edit/github-rtxekp?file=src%2Fapp.tsx

Can you update this example to make it closer to what you're doing?

Also I noticed in your code, your loader call is incorrect. You should be destructuring params, not passing it through, as it is an object that contains request, params, and context.

loader: async ({ params }: LoaderFunctionArgs) => loadEvent(params),

[Placentra]

LOL, omg this is unbelievable. Dude, I have been trying to get rid of this bug for approx. 2 months now, and within 20 seconds after reading your post, I went back to my application and by sheer luck for some reason got the idea, that maybe URLs should not contain periods :-D :-D so I went ahead, and it really is the issue. Since the URL contains piece of the events name, there are "." in it. And these break it down. The ones without periods work directly :-D :-D . Dude, two months! Thank you very very much for time, this has been bugging me to much lately.

[kiliman]

You're right. I tried it on the sample link /event/345-lorem.ipsum, and it crashed on refresh. I even tried URL encoding it, but still no good. I'm not sure if this is a server issue or a React Router issue though. Seems odd that it would blow up like that. Looks like you'll need to pick a different character to replace the .. Anyway, at least you know you weren't crazy.

[kiliman]

I think it might be the server. Are you using vite like the example?

I tried it with Remix and it works fine. Also the URL standard allows . in pathnames just fine.