CODEWITHSUNDEEP
reactjsreact-router
Abdel-Rahman
Abdel-Rahman

Reputation: 569

How to disable forward ref in react link?

I'm using Link component in react, and it does something weird.

enter image description here

it appends my path "requests" to something called children and results in a different url "/requests/requests"

But I want it to be only `"/requests" not "/requests/requests"

That's my code:

<Link key={i + singleCrumb.path} to={singleCrumb.path}>
  {singleCrumb.label + '/'}
</Link>

singleCrumb.label has a string that should be my label. singleCrumb.path has a string that should be my path.

Upvotes: 0

Views: 436

Answers (1)

Drew Reese
Drew Reese

Reputation: 202618

React.forwardRef isn't the issue here; forwarding React refs only passes, i.e. forwards, any React refs your code creates to the Link component to be used by the Link. Your code isn't passing any React refs though.

It appears you are passing a relative path (versus an absolute path) to the Link component's to prop. The difference between relative and absolute routing/navigation is a leading "/" character. Absolute paths start with a leading "/" character, relative paths do not. In the React dev tools you can see that the Link's to prop value is "requests", so this is treated as a link to a route relative to the current location, i.e. pathname and is appended to the end of the path.

To resolve it seems like you should prepend the "/" character to make this an absolute path. Make the link target "/requests" instead of "requests" ("requests" resolving to "/requests/requests").

Example:

<Link key={`/${singleCrumb.path}`} to={`/${singleCrumb.path}`}>
  {singleCrumb.label + '/'}
</Link>

Upvotes: 1

Related Questions