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

[Bug]: Relative Link path does not match docs explanation

Open mattrunyon opened this issue 3 years ago • 1 comments

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

mattrunyon avatar Jan 25 '22 06:01 mattrunyon

related #8350

shulcsm avatar Jan 25 '22 07:01 shulcsm

The new <Link relative="path"> prop gives the behavior you are looking for - where links are relative to the path, not the route hierarchy.

brophdawg11 avatar Jan 24 '23 17:01 brophdawg11