获取带有浏览器历史记录的 id/params 以显示特定的 ID 详细信息 - React Hooks

如何解决获取带有浏览器历史记录的 id/params 以显示特定的 ID 详细信息 - React Hooks

这个问题好像很多人问过，但主要是用redux和class组件。就我而言，我保持简单，但不知何故它不像我以前认为的那样工作。

我有一个数组，其中的数据部分显示在一个组件中（在卡片中），但由于卡片如果包含所有内容将会很大，我希望能够点击卡片并将该 ID 重定向到另一个组件。

我想使用浏览器历史记录，因为我在这里没有使用 redux，但是我怎么能完成我拥有的东西？

我偏向渲染数组的组件：

const MyRequests = () => {
  const [requests,setRequests] = useState([]);
  const { currentUser } = useAuth();

  const getUserRequests = async () => {
    let user = currentUser;
    await db
      .collection("requests")
      .where("uid","==",user.uid)
      .get()
      .then((querySnapshot) => {
        const docs = [];
        querySnapshot.forEach((doc) => {
          docs.push({ ...doc.data(),id: doc.id });
        });
        setRequests(docs);
      })
      .catch((error) => {
        console.log("error while getting requests",error);
      });
  };

  useEffect(() => {
    getUserRequests();
  },[]);

  return (
    <Center>
      <SimpleGrid columns={{ base: 1,md: 3 }} spacing={{ base: 5,lg: 8 }}>
        {requests.map((values) => (
          <Box
            maxW={"330px"}
            w={"full"}
            boxShadow={"2xl"}
            rounded={"md"}
            overflow={"hidden"}
            key={values.id}
          >
            <Box px={6} py={10}>
              <List spacing={3}>
                <ListItem>
                  <ListIcon as={CheckIcon} color="green.400" />
                  Typical capacity: {values.typicalCapacity}
                </ListItem>
                <ListItem>
                  <ListIcon as={CheckIcon} color="green.400" />
                  Nominal voltage (V): {values.nominalVoltage}
                </ListItem>
                <ListItem>
                  <ListIcon as={CheckIcon} color="green.400" />
                  Peak Charge current (A): {values.peakChargeCurr}
                </ListItem>
                <ListItem>
                  <ListIcon as={CheckIcon} color="green.400" />
                  Continuous rate: {values.peakChargeConRate}
                </ListItem>
              </List>
              <Button
                as={Link}
                to={`/my-profile/my-requests/${values.id}`}
                mt={10}
                w={"full"}
                bg={"green.400"}
                color={"white"}
                rounded={"xl"}
                boxShadow={"0 5px 20px 0px rgb(72 187 120 / 43%)"}
                _hover={{
                  bg: "green.500",}}
                _focus={{
                  bg: "green.500",}}
              >
                Read full request
              </Button>
            </Box>
          </Box>
        ))}
      </SimpleGrid>
    </Center>

如您所见，我没有将任何内容传递给 props，只是重定向到我想获取 ID 信息的新路由。 我被困在这里：

const SingleRequest = () => {
  const { id } = useParams();

  useEffect(() => {
    const getSingleRequest = () => {
      >> stuck here <<
    };
  },[id]);


  return <div>dsd</div>;
};

export default SingleRequest;

我怎样才能完成这个实现？我之前用 Redux 做过类似的事情，但在这种情况下，我只想使用钩子并在本地保持状态。我认为浏览器历史记录有一种可能的方式，我只是不知道如何。