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>
and finally, in my Home.js I have this:
<div className='home-posts-container'>
{window.location.pathname === '/' ? <PopularPosts /> : <Outlet />}
</div>