react-router-dom v5.3.0中Link标签URL变更但页面不渲染问题求助

你的问题出在Link组件的路径末尾多了斜杠，和路由定义的路径不匹配，导致对应组件无法渲染。

具体修改步骤： #

• 在ListTasks组件中，移除Link的to属性值末尾的斜杠：

// 原代码
<Link to = {`/task/${task.id}/`}>
// 修改后
<Link to = {`/task/${task.id}`}>

原因说明： #

react-router-dom 5.x中，路由默认采用严格匹配逻辑（除非手动关闭）。你定义的路由路径是/task/:id，但Link跳转的路径是/task/xxx/，两者路径结构不一致，因此TaskPage组件不会被触发渲染。去掉末尾斜杠后，路径与路由规则完全匹配，组件就能正常渲染。

如果需要兼容末尾带斜杠的路径，也可以给路由添加strict={false}配置，但更推荐保持路径写法一致，避免后续出现类似问题：

<Route path="/task/:id" strict={false} component={TaskPage}/>

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