react-router
react-router copied to clipboard
[Bug]: Relative Link path does not match docs explanation
What version of React Router are you using?
6.2.1
Steps to Reproduce
The docs for Link
(specifically here) says in the note that for each '..' the Link removes one URL segment.
The migration guide from v5 to v6 says that for each '..' the Link goes up 1 Route, regardless of how deep that single route goes. This behavior is unintuitive and conflicts with the docs; however, it is the actual behavior.
Either the API docs for Link
are incorrect, or the logic is incorrect and needs to be fixed.
If you have a route like this and click on the Link
on page /a/b
<Routes>
<Route path="/a/b" element={<Link to="../c" />} />
<Route path="/a/c" element={<div>/a/c</div>} />
</Routes>
I know an easy fix is to make sure each Route doesn't contain more than 1 level of the URL, but the behavior is still unintuitive and not documented correctly.
Expected Behavior
The link goes to /a/c
Actual Behavior
The link on /a/b
goes to /c
related #8350
The new <Link relative="path">
prop gives the behavior you are looking for - where links are relative to the path, not the route hierarchy.