0

I am new to react js and I am a self-learner. I need to pass some data with my react route and access this data on another side...So I used useHistory() hook to accomplish my task. But now I have some errors. I can only route with mouse click event only. I can't route using open in new tab or my mouse wheel. I have no idea what's going on with my code. So Anyone can help me with that...Thank you.

  const sendPixelData = () => {
    history.push({
      pathname: `product/${product._id}`,
      state: { detail: product },
    });
  };


 <Link onClick={sendPixelData}> Do some logic and other thing  </Link>
Zenixo
  • 727
  • 1
  • 12
  • 36

1 Answers1

4

A Link component from react-router should not have an onClick parameter but follow the props needed according to the documentation:

https://v5.reactrouter.com/web/api/Link

If you want to pass data you can use the following syntax:

<Link
  to={{
  pathname: `product/${product._id}`,
  state: { detail: product },
  }}
/>
Ivo
  • 2,308
  • 1
  • 13
  • 28
  • when I used to route using open in new tab my state data is undefined...Do you know the reason to happen this..? – Zenixo Jan 25 '22 at 10:14
  • Because the new tab is a brand new version of your app for the user. Check this thread for more information and solutions: https://stackoverflow.com/questions/63151000/pass-state-via-link-while-redirected-to-a-new-tab – Ivo Jan 25 '22 at 10:16
  • what thread ..? – Zenixo Jan 25 '22 at 10:17