0

I am using the Link component from react router as follows

    <li><Link to={{
      pathname: "../photos",
      state: {
        id: props.id
      }
    }} className="nav-link active" >photos</Link></li>

I am using Link this way because I need to pass in some data to the linked component. The linked component exists on a route one level above the current route, hence the two dots and a slash ../ However, when clicked I'm not taken to a level above the current route, but rather /photos is appended to the end of the current route. If I use Link in this manner

<li><Link to="../photos" className="nav-link active" >photos</Link></li>

then it works as expected, but I am unable to pass data through. I don't understand why there is a discrepancy.

-----------------------EDIT--------------------------

Here is the solution Can not pass state with react router dom v6 beta, state is null

user9650710
  • 330
  • 2
  • 3
  • 15
  • What version of `react-router-dom` are you using? From the project directory run `npm list react-router-dom` and report the version. Can you also include your routing/navigation code, i.e. the router and routes and this component in a [minimal, complete, and reproducible code example](https://stackoverflow.com/help/minimal-reproducible-example)? – Drew Reese May 02 '22 at 18:06
  • I found the answer in this post https://stackoverflow.com/questions/67061088/can-not-pass-state-with-react-router-dom-v6-beta-state-is-null – user9650710 May 03 '22 at 03:45
  • I see, so `react-router-dom@6`. Thanks for confirming. – Drew Reese May 03 '22 at 03:48

1 Answers1

-2

Use absolute path. For example;

pathname: "/dashboard/users/5/photos"
Emre A
  • 240
  • 1
  • 6