[Bug]: Optional Params can not work in /* mode

[GuYueJiaJie]

What version of React Router are you using?

6.6.2

Steps to Reproduce

I noticed support for optional parameters starting with 6.5.0, so i used this feature in my project, but there were some problems, which I simulated as follows:

import { BrowserRouter, Routes, Route } from "react-router-dom";

const Nest1 = () => {
  return (
    <Routes>
      <Route path='foo' element="nest1 foo" />
      <Route path='bar' element="nest1 bar" />
    </Routes>
  )
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="nest1/:id?/*" element={<Nest1 />} />
        <Route path="nest2/:id?">
          <Route path="foo" element="nest2 foo" />
          <Route path="bar" element="nest2 bar" />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Expected Behavior

When I visit /nest1/foo, nest1 foo should display on the page.
When I visit /nest1/bar, nest1 bar should display on the page.

When I visit /nest2/foo, nest2 foo should display on the page.
When I visit /nest2/bar, nest2 bar should display on the page.

Actual Behavior

When I visit /nest1/foo, nothing display on the page (It's not what I expected).
When I visit /nest1/bar, nothing display on the page (It's not what I expected).

When I visit /nest2/foo, nest2 foo display on the page(Just as I expected).
When I visit /nest2/bar, nest2 bar display on the page(Just as I expected).

[X7Becka]

Agree. Same for me

[brophdawg11]

This is working as expected since in /nest1/foo it's consuming the foo segment into the :id parameter.

It helps to visualize the routes as if you included them with and without the optional parameter (which is effectively how it's implemented under the hood). Your tree of:

      <Routes>
        <Route path="nest1/:id?/*" element={<Nest1 />} />
        <Route path="nest2/:id?">
          <Route path="foo" element="nest2 foo" />
          <Route path="bar" element="nest2 bar" />
        </Route>
      </Routes>

is the equivalent of:

      <Routes>
        <Route path="nest1/:id/*" element={<Nest1 />} /> {/* with param */}
        <Route path="nest1/*" element={<Nest1 />} />     {/* without param */}
        <Route path="nest2/:id?">
          <Route path="foo" element="nest2 foo" />
          <Route path="bar" element="nest2 bar" />
        </Route>
      </Routes>

And when you see it that way it makes sense that nest1/foo properly renders the <Nest1> component, but it identifies foo as the value for the :id parameter. /nest1/foo/bar does correctly match down into your splat route.