为什么我的 React 组件中的“消息卖家”按钮没有导航到所需的页面？

Question

我正在开发一个 React 应用程序，其中有一个

PostFooter

组件，负责显示与帖子相关的各种功能，例如喜欢帖子、评论帖子以及向卖家发送消息。我遇到了

handleButtonClick

功能的问题，该功能旨在在单击“向卖家发送消息”按钮时导航到另一个页面 (

ChatPage

)。

单击“消息卖家”按钮时，我的 PostFooter 组件内的 handleButtonClick 函数未导航到所需页面 (./pages/ChatPage/ChatPage)。在这种场景下如何正确实现导航功能？

这是我的一些代码

jsx
import { Box, Button, Flex, Input, InputGroup, InputRightElement, Text, useDisclosure } from "@chakra-ui/react";
import { useRef, useState } from "react";
import { CommentLogo, NotificationsLogo, UnlikeLogo } from "../../assets/constants";
import usePostComment from "../../hooks/usePostComment";
import useAuthStore from "../../store/authStore";
import PropTypes from 'prop-types';
import {useNavigate } from 'react-router-dom';
import useLikePost from "../../hooks/useLikePost";
import { timeAgo } from "../../utils/timeAgo";
import CommentsModal from "../Modals/CommentsModal";

const PostFooter = ({ post, isProfilePage, creatorProfile }) => {
    const { isCommenting, handlePostComment } = usePostComment();
    const [comment, setComment] = useState("");
    const [caption, setCaption] = useState("");
    const [description, setDescription] = useState("");
    const [selectedCategory, setSelectedCategory] = useState("");
    const [selectedCondition, setSelectedCondition] = useState("");
    const [price, setPrice] = useState("");
    const authUser = useAuthStore((state) => state.user);
    const commentRef = useRef(null);
    const { handleLikePost, isLiked, likes } = useLikePost(post);
    const { isOpen, onOpen, onClose } = useDisclosure();

    const handleSubmitComment = async () => {
        await handlePostComment(post.id, comment);
        setComment("");
    };

    const handleButtonClick = () => {
        const navigate = useNavigate;
        // Navigate to another page when the button is clicked
        navigate("./pages/ChatPage/ChatPage");
    };

    return (
        <Box mb={10} marginTop={"auto"}>
            <Flex alignItems={"center"} gap={4} w={"full"} pt={0} mb={2} mt={4}>
                <Box onClick={handleLikePost} cursor={"pointer"} fontSize={18}>
                    {!isLiked ? <NotificationsLogo /> : <UnlikeLogo />}
                </Box>
                <Box cursor={"pointer"} fontSize={18} onClick={() => commentRef.current.focus()}>
                    <CommentLogo />
                </Box>
                <Box>
                    <Button fontSize={18} colorScheme="blue" onClick={handleButtonClick}>Message Seller</Button>
                </Box>
            </Flex>
            <Text fontWeight={600} fontSize={"sm"}>
                {likes} likes
            </Text>

Answer 1

react-router-dom useNavigate 钩子需要作为函数调用来获取导航功能，但在您的代码中，您缺少括号。应该是这样的：

       const handleButtonClick = () => {
        const navigate = useNavigate();
        navigate("./pages/ChatPage/ChatPage");
    };