React Router v6 Link component not changing the page at root url-CodePudding

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>
  )
}

CodePudding user response：

From what I can tell of your Home component with

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

You want to render the PopularPosts component exactly when the path is "/", otherwise you want to render one of the matched nested routes.

The issue is that with the above implementation the Outlet isn't rendered when the path changes so none of the nested routes are matchable.

It appears you want the Home component to be a layout route, it should render all the div elements and content, and just the Outlet. Move the PopularPosts component into an index route.

const Home = () => {
  return (
    <>
      <div>content</div>
      <div>content</div>
      <div className="home-posts-container">
        <Outlet />
      </div>
      <div>content</div>
    </>
  );
};

...

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

For more information see: