我正在学习React和Javascript，我正在制作一个简单的应用程序。我有一个项目列表，我想预览一些项目属性（如名称和年龄），并使其有可能在列表中的一个项目被重定向到另一个“规格”页面中的应用程序，在那里我可以显示点击项目的完整信息。
清单的主要内容如下：

import "./DummyItem.css";
import { useNavigate } from "react-router-dom";

export default function Scientist({
  name,
  profession,
  accomplishment,
  dead,
  nobel,
}) {
  const navigate = useNavigate();
  // const clickHandler = () => {
  //   navigate("/ItemSpecs"), { state: { name, profession } };
  // };
  return (
    <div className="container">
      <li
        className="dummy-item"
        onClick={() => {
          navigate("/ItemSpecs"), { state: { name, profession } };
        }}
        style={{ cursor: "pointer" }}
      >
        <h5>{name}</h5>
        <p>profession: {profession}</p>
        <p>accomplishment: {accomplishment}</p>
        
      </li>
    </div>
  );
}

这是我做的清单：

export default function PeopleList() {
  
  const navigate = useNavigate();

  const ScientistsList = people
    .filter((scientist) => scientist.dead !== "true")
    .map((scientist) => (
      <Scientist
        name={scientist.name}
        profession={scientist.profession}
        accomplishment={scientist.accomplishment}
        dead={scientist.dead}
        
        // action={() => navigate("/scientist", { )}

        // useNavigate(2par: url, obj) with unique id in path
      />
    ));

所以，现在我正在努力写一个函数来处理点击重定向在“规格”页面。谁能帮我完成代码，让我理解useNavigate和useState的用法？我的意思是，我现在所得到的是，我必须使用useNavigate和存储科学家信息的数组中每个对象的唯一ID，这样我就可以通过单击将用户重定向到他所期望的确切内容。感谢您的评分
我试着查阅文档，但我被卡住了。我的目标是显示一个项目列表，并带有它们的小预览。一旦你点击其中一个，你会被重定向到一个新的标签，在那里你可以访问你点击的项目的完整信息。