[Bug]: Nested routes not matching

[multiwebinc]

What version of React Router are you using?

6.0.0-beta.6

Steps to Reproduce

In my parent component I have:

<Routes>
  <Route
    path="*"
    element={
      <SubComponent />
    }
  />
</Routes>

And then in <SubComponent /> I have:

<Routes>
  <Route
    path="*"
    element={
      <SomethingElse />
    }
  />
  <Route path="availability" element={<OtherComponent />} />
</Routes>

None of the routes in <SubComponent /> match. This was working in beta 5, so I'm not sure if this is a bug or the behavior has changed slightly.

[multiwebinc]

Note, this still persists with beta 7.

[Monar]

So I'll copy paste here what I had In above "duplicate" bug report. Interesting thing is that the Navigation component got rendered but visuals ones didn't, you can check it in codesandbox I've linked.

The bug is in react-router-dom as bumping it to beta.6 and above creates this issue (its still present in beta.8)

Test Case
https://codesandbox.io/s/react-router-bug-showcase-8g7gf?file=/src/App.tsx

Steps to reproduce
Given this snippet:

const Content = () => {
  return (
    <div>
      <h3>Level 2</h3>
      <Routes>
        <Route path="tab" element={<span>TAB TEST</span>} />
        <Route index element={<Navigate to="tab" />} />
      </Routes>
      <div>Other:</div>
      <Routes>
        <Route path="*" element={<span>TAB TEST</span>} />
      </Routes>
    </div>
  );
};

const Root = () => {
  const { lang } = useParams();
  const nav = useNavigate();
  useEffect(() => {
    if (lang !== "en") {
      nav("en");
    }
  }, [lang, nav]);

  return (
    <>
      <h2>Level 1</h2>
      <Routes>
        <Route path="*" element={<Content />} />
      </Routes>
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Level 0</h1>
      <HashRouter>
        <Routes>
          <Route path="*" element={<Root />} />
          <Route path=":lang/*" element={<Root />} />
        </Routes>
      </HashRouter>
    </div>
  );
}

Expected Behavior
Should render two elements "TEST TAB", and this is a case for versions prior to 6.0.0-beta.6

Actual Behavior
Navigation gets rendered, but then rendering visual elements, here "TEST TAB" is not taking place.

[mjackson]

@Monar It's already fixed and both issues have been closed. See the commit in your original issue.