反应路由器链接到具有不同 URL 的相同组件不重新渲染

Question

我有一个名为 Posts 的组件，它列出了博客中的所有帖子。我在帖子的用户名周围有链接，这些链接仅使用包含用户 ID 的不同 URL 链接到相同的（帖子）组件，以用于查询帖子。问题是 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>

我尝试了各种方法，包括尝试向组件添加密钥，但没有成功。我还看到了一个“强制重新渲染”代码 sn-p，但它是针对以前版本的 React Router。

如何在 React Router v6 中强制渲染 Posts 组件？

Answer 1

如果 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 是一个类组件，那么要么将其转换为函数组件，以便它可以使用 React 钩子，要么创建一个包装器组件或一个新的 withRouter replacement 以使用钩子并将 params 作为道具注入.

Answer 2

我不确定，但我认为这种代码可能会起作用......？

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