React Router动态路由跳转后组件不更新的解决方法咨询

问题场景：使用React Router的动态路由<Route path=':username' element={ <UserPage /> }>时，从http://localhost:3000/Fexell跳转至http://localhost:3000/Test，UserPage组件并未更新加载新路由对应的用户内容。

问题原因 #

React Router在动态路由参数（如:username）变化时，不会重新挂载组件，只会更新组件接收的参数（通过useParams获取）。而你的UserPage组件中，获取用户数据的getUser方法仅在组件首次挂载时通过空依赖的useEffect执行一次，参数变化时不会触发重新请求，导致组件内容不更新。

解决方案 #

将动态路由参数username以及getUser方法依赖的user对象加入useEffect的依赖数组，这样当参数变化时，useEffect会重新执行，调用getUser获取新用户数据，更新组件状态。

修改user.page.jsx中的useEffect部分：

useEffect(() => {
  getUser()
  console.log('Page updated with new username')
}, [username, user]) // 加入username和user作为依赖

同时可以移除// eslint-disable-next-line react-hooks/exhaustive-deps注释，因为现在依赖数组已经完整，符合React Hooks的规则。

修改后的完整UserPage关键代码片段 #

const UserPage = () => {
  const [ user, ] = useContext(UserContext)

  const [ userFromId, setUserFromId ] = useState()
  const [ isLoading, setLoading ] = useState(true)
  const { username } = useParams()

  const getUser = async () => {
    setLoading(true) // 重新请求时设置加载状态
    await axios({
      method: 'GET',
      url: process.env.REACT_APP_API_URL + `/users/${ username }`,
      headers: {
        Authorization: `jwt ${ user.token }`
      }
    })
      .then((response) => {
        setUserFromId(response.data)
        setLoading(false)
      })
      .catch((error) => {
        console.error(error)
        setLoading(false) // 出错也关闭加载状态
      })
  }

  useEffect(() => {
    getUser()
    console.log('Page updated with new username')
  }, [username, user]) // 依赖数组包含username和user

  // 其余组件代码不变...
}

补充说明 #

• 加入setLoading(true)在getUser开头，确保切换用户时显示加载状态，提升用户体验。
• 依赖数组中加入user是因为getUser方法中使用了user.token，当user对象变化时也需要重新请求数据（比如用户登录状态变化）。

内容的提问来源于stack exchange，提问作者Fexell