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

下面提到的代码是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函数，它将数据发送到详细信息页面，但在详细信息页面中给出了location.state=null的错误，这意味着没有数据通过此函数

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

下面的代码将在恐怖页面上显示一个按钮，该按钮将再次单击显示detailspage，但不显示任何数据

  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;

从“React”导入React；
从“react router dom”导入{useLocation}；
函数DetailsPage（）{
让location=useLocation（）；
警报（位置、状态）；
//console.log（location.state[0]）；
返回(
细节
警报（位置、状态）；
{location.state.map（（val，index）=>{
返回(
书名：{val.NAME}
{val.id}

);
})}
);
}
导出默认详细信息页面；

能否添加路线定义的位置和方式？我们丢失了信息``我已经按照上面的代码定义了我的路线，但是detailsPage嵌套在恐怖页面中。简单地说，恐怖书页面上有一个按钮，它会在一个名为detailsPage的新页面上指向您，该页面包含有关恐怖书详细信息的所有信息。但主要问题是，数据没有通过状态进入detailsPage。您现在能理解它吗，Ganzalo？如果

DetailsPage

只是

Horror

中呈现的一个组件，它是在

Route

上呈现的，那么我认为不需要导航到路径“/DetailsPage”，它不是路由器中定义的路径。我认为您需要取消嵌套

DetailsPage

并为其声明路由/路径，或者将其嵌套在“horror/detail”或类似内容中，或者将

horror

作为道具传递给它，因为它已经在同一页上了。你有运行的代码沙盒吗？