[Bug]: Can't start route with @ within Layout Routes

[theostavrides]

What version of React Router are you using?

react-router-dom 6.2.2

Steps to Reproduce

1. Set up routes like so:

<Routes>
    <Route element={<Layout />}>
        <Route path=":id" element={<Chat />} />
    </Route>
</Routes>

2. Navigate to /@tom in the browser

Expected Behavior

/@tom should match path=":id", and render the element to the screen

Actual Behavior

The path does not match and this message is printed in the console: index.tsx:25 No routes matched location "/@tom"

Notes

This issue is related to #8563, which was put into release 6.2.2.

[brophdawg11]

Relates to https://github.com/remix-run/react-router/issues/8525#issuecomment-1054819661. Probably needs a closer look at the spec w.r.t @ as a reserved character

[theostavrides]

@brophdawg11 - please note that the @ character already works in 6.2.2, just not within layout routes.

    <Router>
      <Routes>
        <Route path="/:id" element={<p>works with '/@test'</p>}/>
        <Route path="/nested/:id" element={<p>works with '/nested/@test'</p>}/>
      </Routes>
    </Router>

My PR fixes this issue

[YousefED]

I was running into the same issue and agree with @theostavrides:

• The character already works for non-nested routes
• The character is commonplace in website URLs, for example when showing a profilepage on /@username

[shamsup]

In #8563 I was specifically only including the unreserved characters with the idea that the whitelist could be expanded if needed. Of the reserved characters in the RFC, only !'()* are not touched by encodeURIComponent, but the RFC also says in section 3.3 that @ (as well as : and any sub-delims from 2.2) can be included in paths:

pchar = unreserved / pct-encoded / sub-delims / ":" / "@"

[kgamecarter]

Not merged PR yet. I fix the bug by patch-package in 6.3.0

https://gist.github.com/kgamecarter/b64731e71aeecaa373aa31f81f8a1a43

[kgamecarter]

the #8877 will release in 6.4.0?

[brophdawg11]

Hey folks! We've been doing some work lately to ensure that we can fully support special characters in paths and params etc. If anyone has a moment and would like to give [email protected] a spin with any special character use-cases you have in the wild, we'd love any feedback on whether it's working as expected for you 🙌

Here's a stackblitz with some example routes, so feel free to fork it and add any special scenarios you have in your apps and let us know if anything seems off!

[kurdin]

In new versions of react-router-dom 6.5.x and 6.6.x special characters like @ or ~ does not work in path for route. If you have the same problem, downgrade to 6.4.x.

Here is updated stackblitz from @brophdawg11 with example of broken routes using @ and ~

[mattfysh]

Is there a way to downgrade while using remix? I've given up on trying to get this working with the filesystem-based routing, and now attempting to define a route in remix.config.js as /@:userId ... but it's also not working

[brophdawg11]

You can still use special characters, but dynamic parameters (:param) are required to be full url segments. 6.5.0 included a fix to remove inadvertent support for partial params (/@:param). There's a suggested approach to follow in the release notes if your app was relying on this buggy behavior previously.

I'm going to close this issue out since I think this specific issue has been fixed since 6.4.3 but we missed closing it upon release.