remix-run/react-router react-router@6.5.0

v6.5.0

on GitHub

What's Changed

This release introduces support for Optional Route Segments. Now, adding a ? to the end of any path segment will make that entire segment optional. This works for both static segments and dynamic parameters.

Optional Params Examples

• <Route path=":lang?/about> will match:
  • /:lang/about
  • /about
• <Route path="/multistep/:widget1?/widget2?/widget3?"> will match:
  • /multistep
  • /multistep/:widget1
  • /multistep/:widget1/:widget2
  • /multistep/:widget1/:widget2/:widget3

Optional Static Segment Example

• <Route path="/home?"> will match:
  • /
  • /home
• <Route path="/fr?/about"> will match:
  • /about
  • /fr/about

Minor Changes

• Allows optional routes and optional static segments (#9650)

Patch Changes

• Stop incorrectly matching on partial named parameters, i.e. <Route path="prefix-:param">, to align with how splat parameters work. If you were previously relying on this behavior then it's recommended to extract the static portion of the path at the useParams call site: (#9506)

// Old behavior at URL /prefix-123
<Route path="prefix-:id" element={<Comp /> }>

function Comp() {
  let params = useParams(); // { id: '123' }
  let id = params.id; // "123"
  ...
}

// New behavior at URL /prefix-123
<Route path=":id" element={<Comp /> }>

function Comp() {
  let params = useParams(); // { id: 'prefix-123' }
  let id = params.id.replace(/^prefix-/, ''); // "123"
  ...
}

• Persist headers on loader request's after SSR document action request (#9721)
• Fix requests sent to revalidating loaders so they reflect a GET request (#9660)
• Fix issue with deeply nested optional segments (#9727)
• GET forms now expose a submission on the loading navigation (#9695)
• Fix error boundary tracking for multiple errors bubbling to the same boundary (#9702)

Full Changelog: https://github.com/remix-run/react-router/compare/react-router@6.4.5...react-router@6.5.0