Special character delimiters in route file naming

[wingleung]

👋 hello

We've been working on and off with remix for a while now, almost finishing up a big project, it's been really nice working with remix and seeing the progress the remix team and community took, hats off 👏

We have pages that end with a ~pageId, it's a pattern used so the url could change at any time, because of new content, corrections, developing stories,... the suffix of ~pageId ensures the server can resolve this url to the correct page.

At the moment we cannot target this route specifically because special character delimiters don't work with splats.

A feature that would help split some more chunks into smaller ones would be to support special character delimiters like so

• $path[~]$articleId => /some-article-title~articleId

This would mean we can extract the logic for these types of page away from the default splat $.tsx and also provide dedicated outlets.

Resources

• Repro repo: https://github.com/wingleung/demo-remix-special-character-delimiter
• Special character docs: https://remix.run/docs/en/main/file-conventions/routes#escaping-special-characters

[sergiodxa]

You need to create a route $value.tsx and then parse the params.value to check if it includes ~ and grab the articleId after it.

The #7111 proposal should help solve this if it ever gets implemented.

[wingleung]

yes, that's what we have to do now but my proposal is about being able to split the ~ routes from the $default.tsx because your $default.tsx should preferably handle default routing. Instead I want all routes that end with ~someArticleId to be handle by a dedicated route.

as per documentation we can already do this, we just cannot do it with splats.

I think #7111 is proposal that needs to be tackled as well, but it's a difference use case than this I believe. in my repro repo there aren't any $default.tsx routes to fallback to so there is no conflict to a route without special character but still the special character delimiter doesn't work because of the splats 👉 https://github.com/wingleung/demo-remix-special-character-delimiter/tree/main/app/routes

[wingleung]

🤔 I guess the difference is do we let remix support the special character delimiters to support one more use case through route naming or do we let the developers decide through contraint definitions within the route files

[wingleung]

This doesn't seem possible in react-router because each dynamic segment cannot be split 👉 https://reactrouter.com/en/main/route/route#dynamic-segments