如何通过ReactJS中的useNavigation钩子传递对象数据？

Question

下面提到的代码是reactJS页面，在该页面中，我希望有一个按钮将我路由到带有恐怖对象中提到的一些对象数据的detailsPage

import React, { useState } from "react";
import {useNavigate} from "react-router-dom";
import DetailsPage from "./detailsPage";

function Horror() {
    let navigate= useNavigate(); //object{navigate:}
    const [horror, sethorrorData]=useState([
        {
            name:"Horror Book 1",
            id:"1",
        },
        {
            name:"Horror Book 2",
            id:"2",
        },
    ]);

这是handleclick功能，它将把数据发送到详细信息页面，但是给出了错误的位置。详细信息页面中的state = null表示没有数据通过此函数。

   function handleClick()
    {
        navigate("/detailsPage",{ state : horror });
        // alert(horrorData[0]);
    } 

下面的代码将在恐怖页面上显示一个按钮，该按钮将在单击时显示详细信息页面，但此处未显示任何数据。

  return(
        <div>
            <h1 style={{color:"black"}}>Horror Books</h1>
            <button onClick={handleClick}>More details</button>
            {/* <DetailsPage data={horrorData}/> */}
        </div>
    );
}
export default Horror;

这是详细信息页面的代码，用于通过useLocation挂钩从恐怖页面获取数据。

import React from "react";
import { useLocation } from "react-router-dom";

function DetailsPage() {
    let location= useLocation(); 
    alert(location.state) ;
    // console.log(location.state[0]);
    return(
        <div>
            <h1>Details</h1>
            alert(location.state) ;

            {location.state.map((val,index)=>{
                return(
                    <>
                    <h4>BOOK NAME: {val.name}</h4>
                    <p>{val.id}</p>
                    </>
                );
            })}
        </div>
    );
}
export default DetailsPage;