React Router v6: Optional Route Parameters – Decision Pending on Native Support

Answer to the Core Questions

React Router v6 does not expose a native optional‑parameter syntax (e.g. /users/:id?). The maintainers have not announced a plan to add this feature in the upcoming v7 release, and the current design continues to rely on strict path matching where the most specific route wins regardless of definition order.

Will v7 add native optional‑parameter support?

At the time of writing, the v7 roadmap does not list optional parameters as a feature. The community can file an issue or contribute, but there is no confirmed implementation date. Until then, developers must use workarounds.

Recommended pattern for handling optional parameters in v6

To keep route duplication to a minimum while preserving clear precedence, the most robust approach is to define a single base route and a child route that captures the optional segment. If you do not need a nested layout, a simple route duplication is also acceptable because the strict scoring algorithm will automatically pick the more specific match.

  {/* Base path – shows all users */}
  } />
  {/* Optional id – shows a specific user */}
  } />

When a useParams() hook is used inside UserPage, the id will be undefined for /users and a string for /users/42. This pattern keeps the component logic simple and avoids accidental 404s because the more specific route (/users/:id) will always win.

Using a splat for variable depth or many optional segments

If your route may contain an arbitrary number of optional segments, a splat (*) can capture the rest of the path. The captured value can then be parsed manually.

} />

Inside UserPage, you can split the params["*"]. string to obtain any optional parts. Be careful to place the splat at the end of the path to avoid greedy matching of unintended segments.

Strict matching algorithm & 404 mitigation

• Scoring: React Router v6 assigns a score to each route based on literal segments, dynamic segments, and splats. The highest score wins, so order of <Route> declarations does not affect matching.
• Null‑checking: Always check that useParams() returns a defined value before using it. This prevents runtime errors when the optional param is absent.
• Fallback route: Provide a catch‑all route (e.g., path="*") after all specific routes to show a 404 page, ensuring that any unmatched URL is handled gracefully.

Diagnostic question

Do you currently nest routes under an <Outlet /> (for shared layout or authentication)? If so, a parent route for /users and a child route for /users/:id may be preferable to keep layout logic separated.