// App.js
<Route path="/agent/:username" element={<PublicProfile />} />
// pages/user/PublicProfile.js
import { useState, useEffect } from "react";
import axios from "axios";
import UserCard from "../../components/cards/UserCard";
import { useParams } from "react-router-dom";
import AdCard from "../../components/cards/AdCard";

export default function PublicProfile() {
  const [agent, setAgent] = useState(null);
  const [ads, setAds] = useState([]);
  const [loading, setLoading] = useState(true);
  // hooks
  const params = useParams();

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

  const fetchAgent = async () => {
    try {
      const { data } = await axios.get(`/agent/${params.username}`);
      setAgent(data.user);
      setAds(data.ads);
      setLoading(false);
    } catch (err) {
      console.log(err);
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div
        className="d-flex justify-content-center align-items-center vh-100"
        style={{ marginTop: "-7%" }}
      >
        <div className="display-1">Loading...</div>
      </div>
    );
  }

  return (
    <div>
      <h2 className="display-1 bg-primary text-light p-5 h1">
        {agent?.username ?? agent?.name}
      </h2>

      <div className="container">
        <div className="row">
          <div className="col-lg-4"></div>
          <UserCard user={agent} />
          <div className="col-lg-4"></div>
        </div>
      </div>

      <h2 className="text-center m-5">Recent listings</h2>

      <div className="container">
        <div className="row">
          {ads?.map((ad) => (
            <AdCard ad={ad} key={ad._id} />
          ))}
        </div>
      </div>
    </div>
  );
}

Now in ContactSeller component, you can make user’s name clickable. Once clicked, they will land on agent public profile page

<h4>
  Contact{" "}
  <Link to={`/agent/${ad.postedBy?.username}`}>
    {ad.postedBy?.name ?? ad.postedBy?.username}
  </Link>
</h4>