Fix: cant start route with @ within Layout Routes (#8699)

[theostavrides]

Fixes bug #8699

When a route is nested within a layout route, it wont render routes starting with an '@' symbol:

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

Note that the router works correctly when the parent is NOT a layout route (i.e. has a path defined), or is at the root level:

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

[remix-cla-bot]

Hi @theostavrides,

Welcome, and thank you for contributing to React Router!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[knpwrs]

This would also fix remix-run/remix#2012

[kgamecarter]

also fix remix-run/remix#846

[chaance]

@theostavrides I'd love to merge this. Would you mind resolving the merge conflicts and updating your branch?

It's actually simple, we just reorganized our file structure a bit and the updated code is now in react-router/lib/router.ts. Thanks a ton!

[theostavrides]

@chaance Would be happy to. I'll get on it tomorrow