Refresh same page with different parameters using React Navigation-CodePudding

I am using React Navigation to navigate between pages. I have a Profile page that contains user info card and that user's posts. I use Post component inside this Profile component as shown below.

And I have a link button to navigate users profile inside the Post component.

<Button className="fs30"              
   type="text" 
   onClick={() => {navigate("/Profile",{state:{profileID:post.userId}});}}
>
  {post.userName}
</Button>

I also use this Post component inside Home Page and navigation is works there without any problem.

My question is the following: When I'm on Profile page and click the navigate button nothing happens. I want to refresh the Profile page with different parameters when the button clicked.(ex: different users profile). How can I do that?

Note: I am fetching the data in Profile page from WEB API using profilId state and useEffect hook:

useEffect(() => {
  const response = axios.get("http://localhost:5122/GetSpesificUsersPosts", {
    params: { userId: profileId },
  });
  response.then((res) => {
    setPostList(res.data);
  });
}, []);

useEffect(() => {
  const response = axios.get("http://localhost:5122/GetUserInfo", {
    params: { userId: profileId },
  });
  response.then((res) => {
    setUserInfo(res.data);
  });
}, []);

CodePudding user response：

Since profileID is changing, your current code would work. All you have to do is to add it as dependency, like so:

useEffect(() => {
  const response = axios.get("http://localhost:5122/GetSpesificUsersPosts", {
    params: { userId: profileId },
  });
  response.then((res) => {
    setPostList(res.data);
  });
}, [profileId]);

useEffect(() => {
  const response = axios.get("http://localhost:5122/GetUserInfo", {
    params: { userId: profileId },
  });
  response.then((res) => {
    setUserInfo(res.data);
  });
}, [profileId]);