Passing an Object through params in react (not passing the properties one by one with { })

Question

I'm trying to pass an Object variable trough params with react router v6.

edit:

I don't want to pass all the properties in the navigate, because my data is a super long object. So I want to pass the whole object and extract it's properits in the other component.

The problem is, that the object which was received from the transfer looks like: [object object], and I can't get access to the fields inside of it.

Here is the code in the component when I pass the data with navigate:

    navigate(`/submit-page/${data}`, { replace: true });

And this is the code in the component that recives the data:

import { useParams } from "react-router-dom";

const SubmitPage = () => {
  const params = useParams();

  console.log(params.data); //this prints: "[Object Object]"

  return (
    <>
      <h3>Your data: {params.data.*someField*}</h3> // nothing showing.          
    </>
  );
};
export default SubmitPage;

However, if in the navigate I will send a specific field from the data object, it returns it perfectly.

So the problem is that it can't extract from the params object in the second component.

Can you please help me solve this?

Have you setup your route to accept parameters? `path="/submit-page/:data` ? — Ryan Zeelie, Aug 28 '22 at 00:31
yes I did, and if I pass something else everthing looks fine. The problem is sending an whole object — Tehila, Aug 28 '22 at 00:42
Route params are strings, always. If you want to pass data pass it in the `state` property of the options argument. — Drew Reese, Aug 28 '22 at 00:43
And how do I extract the data from the ```state``` property in the other component? — Tehila, Aug 28 '22 at 00:47
From the `location` object. The linked duplicate explains all this, please do review it. — Drew Reese, Aug 28 '22 at 00:49

Passing an Object through params in react (not passing the properties one by one with { })

0 Answers0