url中的id更改后如何重新呈现功能组件

我有一个React组件,它从IndexedDB中获取一些数据,这是一个异步任务,它使用useParams挂钩传递的url中的id,比如说id = 1。 当我单击示例中的链接时,id更改为2,但此时没有任何反应,该组件不会重新渲染。

我需要做些什么才能使其正常工作?我只是不明白为什么它现在不起作用。 有人可以启发我吗?

import React, {useState} from 'react';
import { Link, useParams } from "react-router-dom";
import { useAsync } from 'react-async';

export default function (props) {
  let {id} = useParams();
  const {data, error, isLoading} = useAsync({ promiseFn: loadData, id: parseInt(id)});
  if (isLoading) return "Loading...";
  if (error) return `Something went wrong: ${error.message}`;
  if (data)
   return (
    <>
      <h1>{data.name}</h1>
      <Link to={'/2'}>other id</Link>
    </>
   );
}
评论