CODEWITHSUNDEEP
react-router
Nikhil Sachan
Nikhil Sachan

Reputation: 11

State is undefined while passing prop to react router

ArticleItem.js

<Link to="/articlePage" state= {{ heading: heading }} target="_blank">
                continue reading...
</Link>

From ArticleItem.js component I want to send heading to ArticleSoloPage component

const location = useLocation();
    useEffect(()=>{
      console.log(location);
    },[])

{pathname: '/articlePage', search: '', hash: '', state: undefined} But there state is undefined

Upvotes: 1

Views: 904

Answers (3)

Dawood Ahmad
Dawood Ahmad

Reputation: 474

then you can try it by useHistory() like this, instead of Link use any other tag like Span, div, or any other.

   import { useHistory } from "react-router-dom"
   const history = useHistory();

   <div onClick={()=> history.push({pathname: "/articlePage",
        state: { heading: heading }
})
}>
//your statements
</div>

and then catch it like this :

const currentState = history.state

Upvotes: 1

Dawood Ahmad
Dawood Ahmad

Reputation: 474

you have the state within "to" and then catch it like this:

  <Link
      to={{
        pathname: "/articlePage",
        state: { heading: heading }
      }}
  >
   continue reading...
  </Link>

now on the other side:

const location = useLocation();
const heading = loaction.state.heading;

useEffect(()=>{
  console.log(heading);
  alert(heading);
},[])

Upvotes: 1

elirand5
elirand5

Reputation: 231

You need to use Link like this:

<Link
  to={{
    pathname: "/articlePage",
    search: "?sort=name",
    hash: "#the-hash",
    state: { heading: heading }
  }}
>
  continue reading...
</Link>

Read this: https://knowbody.github.io/react-router-docs/api/Link.html#

Upvotes: 1

Related Questions