react-router icon indicating copy to clipboard operation
react-router copied to clipboard

[Bug]: Trailing slashes in router path are not present in useMatches parent results

Open davidjayb opened this issue 1 year ago • 0 comments

What version of React Router are you using?

6.11.0

Steps to Reproduce

Create a router with parent and child routes. Each route has a trailing slash in the path.

The example below removes some required fields for brevity.

Router.jsx

createBrowserRouter([
  {
    path: 'parent/',
    children: [
      {
        path: 'child/'
      }
    ]
  }
]);

Breadcrumbs.jsx

export default function Breadcrumbs() {
    const matches = useMatches();
    matches.forEach(match => console.log(match.pathname))
}

Expected Behavior

The output in the console should include a trailing slash for each match pathname. This is useful for consistency in resolving URLs, especially in conjunction with the NavLink.end property: https://reactrouter.com/en/main/components/nav-link#end

Actual Behavior

The following will be printed in the console:

/parent
/parent/child/

davidjayb avatar Jan 31 '24 16:01 davidjayb