Reat Js navigate with json object to another page

Question

Below is my code, I am fetching the data from api and on success I am setting the the response of state in set_ProductDetails. I want to pass the response state to different component and different page with the result and bind the data. I am using "react-router-dom": "^5.2.0".

Product_info.jsx

function GetProductDetails(products) {
  const history = useHistory();
  useEffect(() => {
    console.log("render", history.location.state);
  }, []);
  return (
    <>
      <div>
        <h1>Transaction Info</h1>
      </div>
    </>
  );
}
export default GetProductDetails

Product_query.jsx

function ProductSearch() {

  const [product_id, setProduct_id] = useState();
  const [product_search, set_ProductSearch] = useState({ product_id: "" });
  const [product_deatils, set_ProductDetails] = useState({ product_id: "" });

  const history = useHistory();
  
  //Handle the onSubmit
  function handleSubmit() {
    try {
      set_ProductSearch({ address: product_id });
      
    } catch (e) {
      alert(e.message);
    }
  }
  
   function onAPISuccess(data) {
     history.push("/product_info/GetProductDetails", { data }); 
    //here render blank screen 
    }

  useEffect(() => {
    
     const fetchData = async (product_id) => {
          try {
            const resp = await axios.post(
              config.SERVER_URL + "/api/getProductInfo/",
              product_id
            );
            set_ProductDetails(resp.data);
            onAPISuccess(data)
          } catch (err) {
            console.error(err);

        fetchData(product_search)
          .catch(console.error);
      
    }
  }, [product_search]);

return (
    <>
      <div class="input-group mb-3">
        <input
          type="text"
          class="form-control"
          aria-describedby="button-addon2"
          id="txt_address"
          name="address"
          placeholder="Address/Tx hash"
          onChange={(e) => setProduct_id(e.target.value)}
        ></input>

        <div class="input-group-append" style={{ color: "white" }}>
          <button
            class="btn btn-outline-success"
            type="button"
            id="button-addon2"
            onClick={() => handleSubmit()}
          >
            Search
          </button>
        </div>
      </div>
    </>
  );
}

export default ProductSearch

Home page

export default function Home() {
return (
    <>
   <main>
        <div
          className="col-md-12"
          style={{
            background: "#fff",
            backgroundImage: `url(${Image})`,
            height: "245px",
          }}
        >
          <Container className="container-sm">
            <Row>
             
              <Col xs lg="5" className="justify-content-md-center">
                <div>
                  <ProductSearch></ProductSearch>
                </div>
              </Col>
            
            </Row>
          </Container>
        </div>
</main>
    <>
 )
}

Answer 1

Do history.push("/your_path",{..object you want to send}). Then in the component where this history.push redirects, access that object by saying history.location.state (this will return the object you passed while redirecting).