反應路由器鏈接到具有不同 URL 的相同組件不重新渲染

Question

我有一個名為 Posts 的組件，它列出了博客中的所有帖子。 我有圍繞帖子用戶名的鏈接，這些鏈接僅使用不同的 URL 鏈接到相同的（帖子）組件，其中包含用於查詢帖子的用戶 ID。 問題是 Posts 組件在訪問此 URL 時不會重新呈現，盡管瀏覽器中的 URL 會相應更改。

App.js 中的路由：

<Routes>
  <Route path='/' element={<Posts/>}/>
  <Route path='/user/:user_id/posts' element={<Posts/>}/>
</Routes>

Posts.js 中的鏈接

<Link to={`/user/${post.user.id}/posts`}>
  {post.user.username}
</Link>

我嘗試了各種方法，包括嘗試向組件添加密鑰，但沒有成功。 我還看到了一個“強制重新渲染”代碼片段，但它是針對以前版本的 React Router 的。

如何在 React Router v6 中強制渲染 Posts 組件？

Answer 1

我不確定，但我認為這種代碼可能會起作用......？

<Routes>
  <Route path='/' element={props => <Posts {...props} />}/>
  <Route path='/user/:user_id/posts' element={props => <Posts {...props} />}/>
</Routes>

如果它不起作用，也許只是使用<a>而不是<Link>可能會起作用。

<a href={`/user/${post.user.id}/posts`}>
  {post.user.username}
</a>

Answer 2

如果Posts由具有更改路由參數的路由呈現

<Routes>
  <Route path='/' element={<Posts/>}/>
  <Route path='/user/:user_id/posts' element={<Posts/>}/>
</Routes>

那么它應該“監聽”路由匹配參數的變化。

在Posts中使用useParams掛鈎來訪問user_id路由匹配參數，並使用依賴於user_id的useEffect掛鈎來運行/重新運行任何邏輯。

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

...

const { user_id } = useParams();

useEffect(() => {
  if (user_id) {
    // do something with user_id
  }
}, [user_id]);

如果Posts是 class 組件，則將其轉換為 function 組件以便它可以使用 React 鈎子，或者創建一個包裝器組件或新的withRouter 替換以使用鈎子並注入params作為道具。