为什么React-router在url改变时不重新渲染页面也不更新数据？

我正在 React 中构建一个项目，该项目通过自定义挂钩从 API 检索数据，一旦检索到数据，它就会显示卡片，通过单击它们可以打开描述性页面。到这里一切都好。

// App.js
<Routes>
   <Route path="/" element={<Home />} /> // cards list
   <Route path="/:eleId" element={<Details />} /> // description page 
</Routes>

// Home.jsx with single card
<div className="container">
   <Link to={`/${eleId}`}>
      <Card />
   </Link>
</div>

我的问题来了： 在描述页面内，我有相关链接，单击时会打开同一页面，但会更改数据：

// Details.jsx description page 
import { useParams, Link } from 'react-router-dom';
import useData from '../hooks/useData';

const Details = () => {
   const { eleId } = useParams(),
         [data] = useData(`alpha/${eleId}`); // call API with url of eleId

   return(
      <div className="description">
         <p>BLa bla bla</p>
         <Link to={`/${data.id}`}> Related </Link>
      </div>
   );
}

export default Details;

// useData.jsx custom hook
import { useState, useEffect } from 'react';

const useData = (param = 'all') => {
   const [data, setData] = useState([]),
         [error, setError] = useState(null),
         [isLoading, setIsLoading] = useState(true);
    
    const url = 'https://restcountries.com/v2/'+param;

    useEffect(() => {
        const fetchAPI = async () => {
            setIsLoading(true);
            try {
                const response = await fetch(url),
                        json = await response.json();
                setData(json);
                setError(false);
            } catch(err) {
                setError(err.message);
                setData(null);
                console.log(err);
            }
            setIsLoading(false);
        };
        fetchAPI(); 
    }, []);

   return [data, error, isLoading];
}

export default useData;

网址更改正确，但数据未更新...但如果我刷新它就会更新。

我不明白为什么 React 无法重新渲染页面。有人可以给我一些建议吗？

谢谢 ：）

// Details.jsx description page 
<div className="description">
  <p>BLa bla bla</p>
  <Link to={`/${eleId}`}>Related</Link>
<div>

If Details组件正在链接到其自身，即渲染它的路由，这意味着路由路径已经匹配并正在渲染Details. Details可能需要“监听”上的更改eleId路由匹配参数使用useParamsReact hook 来访问eleId参数和一个useEffect钩与eleId作为参数更新时运行任何必要的副作用的依赖项。

Example:

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

...

const Details = () => {

  const { eleId } = useParams();
  const [data] = useData(`alpha/${eleId}`);

  ...

  useEffect(() => {
    // Business logic to run when eleId updates
  }, [eleId]);

  ...

For the useData钩住，移动url声明进入useEffect挂钩并添加param参数作为效果的依赖项。当参数改变时，这将重新触发useEffect并重新获取数据。

const useData = (param = 'all') => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
    
  useEffect(() => {
    const url = 'https://restcountries.com/v2/' + param;

    const fetchAPI = async () => {
      setIsLoading(true);
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
        setError(false);
      } catch(err) {
        setError(err.message);
        setData(null);
        console.log(err);
      }
      setIsLoading(false);
    };
    fetchAPI(); 
  }, [param]);

  return [data, error, isLoading];
}