React router page just disappearing

Hey there! I recently tried using react for a website that lists all freelancers, but now when I try to access a specific freelancer's site, it just shows a blank page. My code is here:

App.js

import Navbar from './Navbar';
import Home from './Home';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Create from './Create';
import Freelancerdetails from './FreelancerDetails';

function App() {

  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route exact path="/create">
              <Create />
            </Route>
            <Route path="/freelancers/:username" >
              <Freelancerdetails />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;

FreelancerDetails.js

import { useParams } from "react-router-dom";

const Freelancerdetails = () => {
    const { username } = useParams();

  return (
    <div className="freelancer-details">
      <h2>Freelancer details - { username }</h2>
    </div>
  );
}

export default Freelancerdetails;

Home.js

import { useState, useEffect } from "react";
import BlogList from "./BlogList";

const Home = () => {
  const [freelancers, setFreelancers] = useState([
    { skills: 'Not loading', name: 'mario', id: 1, homepage: "https://zetax.dev" },
  ])
  const [isPending, setisPending] = useState(true);

  useEffect(() => {
        const fetchData = async () => {
          const response = await fetch("https://149-56-112-99.my.local-ip.co/", {
          });
            const data = await response.json();
            const newFreelancers = data.slice(0, 50);
            setFreelancers(newFreelancers);
            setisPending(false);
        }
        fetchData();
    }, []);

  return (
    <div className="home">
      { isPending && <div>Fetching data...</div> }
      <BlogList freelancers={freelancers} title="All Freelancers" />
      <a href="https://zetax.dev" className="watermark">Made by Zetax</a>
    </div>
  );
}

export default Home;

BlogList.js

import { faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link } from 'react-router-dom';

const BlogList = ({ freelancers, title, }) => {

    return (
        <div className="blog-list">
            <h2>{title}</h2>
            {freelancers.map(blog => (
                <div className="blog-preview" key={blog.id} >
                    <h2><Link to={ "/freelancers/" + blog.name}>{blog.name}</Link></h2>
                    <p>Skills: {blog.skills}</p>
                    <a href={blog.homepage}>Visit Homepage</a>
                </div>
            ))}
        </div>
    );
}

export default BlogList;

I really hope someone would be willing to help me as it's a really frustrating issue to deal with! Greetings, Finn