Is there any way to replace slashes by hyphens?

[Loschcode]

Hi 👋

I'm trying to optimize my website built with Remix for SEO purposes. Is there a way in Remix to have something of the sort

/routes/something-$extension.tsx

To be able to route it this way

something-test
something-otherwise

I know it's already possible to do

/routes/something.$extension.tsx

But the result would something/test which is not what I want... Do you have any idea how to solve this?

[grunklejp]

Is there any reason why a normal route parameter isn't working for you?

You could just do a quick regex for something-* in the loader and return a 404 if the param didn't match.

[mikkpokk]

Hi 👋

I'm trying to optimize my website built with Remix for SEO purposes. Is there a way in Remix to have something of the sort

/routes/something-$extension.tsx

To be able to route it this way

something-test
something-otherwise

I know it's already possible to do

/routes/something.$extension.tsx

But the result would something/test which is not what I want... Do you have any idea how to solve this?

In 2024 (and in years prior), the idea of preferring hyphens over slashes doesn't give you any advantage on search engines. I'm not sure if it ever was a thing or just a widely spread myth.

In most cases, it's actually the opposite because search engine algorithms have a harder time understanding page groups with hyphens.

Therefore, use hyphens only for slugs (ie. /post/$slug) and don't be afraid to use slashes to separate page groups.

Been there, done that, and reverted it too 😉

[kiliman]

In addition, React Router only allows route params that encompass the entire URL segment.

That is, you can use: /routes/$param.tsx but not /routes/prefix-$param.tsx.

If you want to handle prefixes or suffixes, you'll need to parse them out in your loader and handle them accordingly.