[v6][Bug]: Different behavior between flat paths and nested paths

[Isammoc]

What version of React Router are you using?

6.0.2

Steps to Reproduce

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

routes = [ {
  path: 'doesnotwork'
  children: [
    {
      path: '*',
      element: <InnerRoutes />
    }
  ]
]

function InnerRoutes() {
  return (
    <Routes>
      <Route path="a" element={<h1>Subpath A</h1>} />
      <Route path="*" element={<h1>Not found!</h1>} />
    </Routes>
  );
}

Expected Behavior

The path doesnotwork/a should display the subpath a

Actual Behavior

The InnerRoutes' Routes element does not render the corresponding Route element to subpath.

[Isammoc]

Tested and reproduced in 6.1.1

[AntonioDeCasper]

Face with same issue:

const App: React.FC = () => (
  <Routes>
    <Route
      path="project/*"
      element={
        <Routes>
          <Route path="all" element={<PageProjects />} />
          <Route path="*" element={<div>Not found 2</div>} />
        </Routes>
      }
    />

    <Route path="*" element={<div>Not found 1</div>} />
  </Routes>
);

Receive an error when i try navigate to /project/all

404 (Not Found)

@ryanflorence Need fix of that asap

[AntonioDeCasper]

Try another way:

const App: React.FC = () => (
  <Routes>
    <Route path="/" element={<WrapperPage />}>
      <Route path="project" element={<Outlet />}>
        <Route path="all" element={<PageProjects />} />

        <Route path="*" element={<div>Not found 3</div>} />
      </Route>

      <Route path="*" element={<div>Not found 2</div>} />
    </Route>

    <Route path="*" element={<div>Not found 1</div>} />
  </Routes>
);

No luck. Receive another 404 error when try navigate to /project/all page

[AntonioDeCasper]

Try to reproduce routes structure from official documentation - https://reactrouter.com/docs/en/v6/getting-started/concepts#defining-routes

const App: React.FC = () => (
  <Routes>
    <Route path="/" element={<WrapperPage />}>
      <Route index element={<PageProjects />} />

      <Route path="project" element={<Outlet />}>
        <Route path=":projectId" element={<PageProject />} />
        <Route path="all" element={<PageProjects />} />
        <Route index element={<PageProjects />} />
      </Route>
    </Route>

    <Route element={<Outlet />}>
      <Route path="/profile" element={<PageProfile />} />
    </Route>

    <Route path="login" element={<PageLogin />} />
  </Routes>
);

Same 404 error...

[elijahrdorman]

I'm also affected by this issue.

Basically:

const Outer = () => (
  <Routes>
    <Route path="foo" element={<Inner />} />
    <Route path="*" element={<NotFound />} />
  </Routes>
)

const Inner () => {
  const params = useParams()

  return (
    <Routes>
      <Route path=":myId" element={<WithId />} />
      <Route path="" element={<WithoutId />} />
    </Routes>
  )
}

With the path /foo/abc results in NotFound rendering.

Changing to <Route path="foo/*" /> means that the WithoutId renders, but with params being {'*': 'abc'}.

Changing to <Route path="foo/:myId" /> also renders WithoutId, but with params being {myId: 'abc'}.

It seems like there needs to be a symbol that means "consider a match, but pass on to a subrouter". Alternatively, it could detect the presence of <Routes> children/grandchildren in addition to <Route> children.