react-router
react-router copied to clipboard
[Bug]: Trailing slashes in router path are not present in useMatches parent results
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/