Reactjs 反应：在url中传递id参数时重新呈现页面

我是新手，我有一个疑问： 在我的索引页面中，我声明路由，调用组件

<Route path="/assignments/organization/:id" component={Manifest} />

在“清单”组件中，我有两个组件：

• 带有链接的“侧边栏”
• 一个“提要”组件，它调用一个检索我的信息的api来构建分配列表

我的问题是，当我单击侧栏上传递id的链接（例如：/assignments/organization/1234）时，提要组件不会向api发出此新请求，因此不会重新呈现链接到该id的信息（如果我按F5刷新页面，它会执行请求，但单击链接时，它只会更改浏览器url上的id，但不会执行任何操作）

侧边栏上的链接

{chl.name}

提要代码：

import React，{useffect，useRef}来自“React”；
从“组件/utils/useApi”导入useApi；
从'react router dom'导入{useLocation}；
从“组件/提要/提要列表”导入提要列表；
常量提要=（）=>{
让location=useLocation（）；
let path=（location.pathname）.toLocaleLowerCase（）；
让orgId=''；
让pathArr=path.split（“/assignments/”）
if（pathArr[1]）{
if（pathArr[1].split（'/'）[1]&&pathArr[1].split（'/'）[1]！==未定义的（&&pathArr[1].split（'/'））[1]！==''）{
orgId='Organization/'+pathArr[1]。拆分（'/'）[1]
}否则{
orgId='Organization/'
}
}
让requestPath=（orgId）？orgId:“”；
const mountRef=useRef（null）；
const[load，loadInfo]=useApi({
德伯恩：300，
url:`/Assignments/${requestPath}`，
方法：“get”，
});
useffect（（）=>{
装载({
取消公告：mountRef.current，
});
如果（！mountRef.current）{
mountRef.current=真；
}
}, []);
返回(
)
};
导出默认提要；

我无法将注释添加到您的帖子中，但您的useEffect（）挂钩的依赖项数组中需要一个依赖项。对于空数组，它仅在初始渲染时激发。使用数组中的依赖项，它将在依赖项更改时激发

因此，在初始渲染时以及

id

更改时，将触发以下代码：

useEffect(() => {
    load({
        debounced: mountRef.current,
    });

    if(!mountRef.current) {
        mountRef.current = true;
    }
}, [id]);

类似的逻辑可以应用于其他钩子，使它们在依赖项发生变化时启动

---

您需要在此处添加

requestPath

依赖项，因为这只会在组件装载后运行，不会在发生任何更改时运行。

什么是

useAPI（…）

返回的？您的代码似乎比它应该的更复杂。我看不出您使用

useRef（）的原因

hook，如果您想访问

id

param，为什么不使用

useparms（）

hook？只要

id

param发生更改，您就应该更改代码以发出API请求。目前，您的代码似乎只发出一次请求。useApi返回json。我尝试使用useParams，但它没有重新渲染。我从何处获得此依赖关系，以及如何实现它？`}，[]）；`在空数组中添加

requestPath

useEffect(() => {
        load({
            debounced: mountRef.current,
        });

        if(!mountRef.current) {
            mountRef.current = true;
        }
    }, []);