[Bug]: Path with emojis no longer working in v6

[SevenOutman]

What version of React Router are you using?

6.2.1

Steps to Reproduce

https://stackblitz.com/edit/github-ksmc1e?file=src/App.tsx

• Declare a route with path set to "🔨"
• Visit path "/🔨" (by clicking on the "About (🔨)" link)
• "About" page is not shown and the "🔨" route is not matched

Expected Behavior

Routes that has a path with emoji should be matched as they were in v5.

Actual Behavior

Routes that has a path with emoji is not matched.

[marcusleg]

Paths with umlauts (äöüÄÖÜ) or the Scandinavian letter ø aren't working either. I suspect these issues are related.

[seeden]

You are not able to use _ or @ as the first character as well. I really need to use it and have no idea how

[Wei12345]

It seems to be working properly in version 5.
but in version 6 it is broken.

[thany]

This is because the package path-to-regex was used in v5, which has been replaced in v6 with a rather underpowered alternate function that allegedly does the same thing. It doesn't.

It's a bit of a Not invented here antipattern, the way I see it.

[laem]

@marcusleg this may be a solution meanwhile : #8824 (comment)

[sandinmyjoints]

This issue bit us -- it would probably be a good idea to note it in the upgrading docs or release notes. Definitely a breaking change!

[mleister97]

Doesn't look like the team is interested in fixing this bug. Is there any news about it?

[mleister97]

Fix in the meantime:

<Route path={encodeURIComponent('page-with-umlauts-äöü')} element={<Page />} />

Be aware that if you use route params, that you only use encodeURIComponent for the part with the special characters:

<Route path={`${encodeURIComponent('äöü')}/:param`} element={<Page />} />

[ogdendavis]

Encountered the same issue, but with the special character included in the param, e.g.:

// Works if param === "mathematics"
// Error if param === "matemáticas"
<Route path="/study/:param" element={<Study />} />

In our case, the param can be in either English or Spanish, and therefore can have á, é, ñ, etc. Has anybody solved how to fix this if the breaking character(s) come from a route param instead of a hard-coded part thereof?

[thany]

Revert to v5 seems to be the way to go, so long as the authors refuse to fix this (that seems to be the case, so please prove me wrong).

[kiliman]

Have any of you that are complaining attempted to solve the issue on your own?

It's not a matter of "authors refuse to fix this"... but that they have limited resources and have to prioritize which bugs/features to focus on. And remember, they are doing this for you for free.

[thany]

I have attempted, but there is no way to make react-router "break out of" its constrains with that underpowered function that replaced path-to-regex, other than by patching the source code and essentially reverting the decision to cripple path parsing.

I seriously doubt that a PR containing such reversion will ever be accepted.

Btw, mind you, Remix is a for-profit company. They make money indirectly (and directly, in the past) from Remix the framework.