Passing props with Navlink in react-router-dom (v6)

Question

In version 5, I used to do this:

<NavLink
  key={"myRoute"}
  to={{
    pathname: "myRoute",
    state: {myState: "myStateValue"},
  }}
  className="nav-card"
>

then receive props with useLocation location.state

But what happened when I upgraded to version 6 is that location.state is null

Answer 1

Try doing this:

<NavLink
  key={"myRoute"}
  to="myRoute"
  state={{ myState: "myStateValue" }}
  className="nav-card"
>

then to receive the props:

const location = useLocation()
const { myState } = location.state