I am working on a react web app and i am using react router. I want to pass data from the NavLink
to my Movies
component. The NavLink
is shown below.
<ul>
<li id="movies">
<NavLink exact to = {{pathname: "/", state:{page: 1}}} > Movies </NavLink>
</li>
</ul>
In my router, i want to redirect to movies/all/1
from the landing page. My routes are:
<Route exact path="/" render={() => <Redirect to="/movies/all/1" />} />
<Route exact path = "/movies/:genre/:genrePage" component = {Movies} />
In the Movies
component, i can access the route parameters but i am failing to access the data, {page: 1}
, passed from NavLink
via location
props. I keep getting undefined
as the value of props.location.state
. How do i go about this? I don't want the data i am passing to be in the url
.
EDIT
Perhaps to clarify. The question below partly answers my question.
However i am still failing to access the data passed from Link
when the page is first loaded and then redirected from root path /
to /movies/all/1
. It is only accessible after Link
has been clicked.