I have created a Link on a Post that links to the Post Page. When the link is clicked with the url at '/' the link doesn't work correctly, it displays the correct link in the url e.g. http://localhost:3000/posts/624a771b42211849eaada885 but the page doesn't redirect, the only way it works is if I refresh the page. However, if I am on my Popular Posts page the link works correctly. To be clear the Post is in a component called Posts which displays all of the Posts. The Posts component is a shared component across many components, such as Home page ('/') and Popular Posts (/popular) the link works in all other pages except for when at '/'

Below is the Link.

<Link to={`/posts/${_id}`}>
  <h2 className='post-title'>{title}</h2>
</Link>

My routes are set up with the following:

<Route element={!token ? <Navigate replace to='/login' /> : <Navbar />}>
  <Route
    path='/'
    element={<Home />}
  >
    <Route
      path='/popular'
      element={<Popular />}
    />
    <Route 
      path='/posts/:postId' 
      element={<PostPage />} 
    />
  </ Route>
</Route>

In my Navbar I have:

const Navbar = () => {

  return(
    <>
      <nav>
      </nav>
      <Outlet />
    </>
  )
}

and finally, in my Home.js I have this:

const Home = () => {
  return (
    <div>content</div>
    <div>content</div>
    <div className='home-posts-container'>
          {window.location.pathname === '/' ? <PopularPosts /> : 
           <Outlet />}
    </div>
    <div>content</div>
  )
}