React Router v6 Link 組件不更改根頁面 url

Question

我在鏈接到Post Page的Post上創建了一個Link 。 當在'/'處使用 url 單擊鏈接時，鏈接無法正常工作，它會在 url 中顯示正確的鏈接，例如http://localhost:3000/posts/624a771b42211849eaada885但頁面不會重定向，唯一它的工作方式是如果我刷新頁面。 但是，如果我在我的Popular Posts頁面上，該鏈接可以正常工作。 需要明確的是，帖子位於一個名為 Posts 的組件中，該組件顯示所有帖子。 帖子組件是許多組件的共享組件，例如主頁 ( '/' ) 和熱門帖子 ( /popular ) 該鏈接在所有其他頁面中有效，但在'/'時除外

下面是Link 。

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

我的路線設置如下：

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

在我的導航欄中，我有：

const Navbar = () => {

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

最后，在我的 Home.js 中我有這個：

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

Answer 1

據我所知，您的Home組件有

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

您希望在路徑為"/"時准確呈現PopularPosts組件，否則您希望呈現匹配的嵌套路由之一。

問題在於，在上述實現中，當路徑更改時不會呈現Outlet ，因此沒有任何嵌套路由是可匹配的。

您似乎希望Home組件成為布局路線，它應該呈現所有div元素和內容，並且只呈現Outlet 。 將PopularPosts組件移動到索引路由中。

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>

有關詳細信息，請參閱：

• 布局路線
• 索引路線