[Bug]: Nested routes not matching

3
closed
multiwebinc
multiwebinc
Posted 1 month ago

[Bug]: Nested routes not matching #8127

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
multiwebinc
Created 1 month ago

Note, this still persists with beta 7.

Monar
Monar
Created 1 month ago

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
mjackson
Created 1 month ago

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