React Admin列表中链接无法正常打开,点击触发编辑而非跳转
解决方案
1. 解决Link点击触发行编辑的问题
问题根源是点击自定义字段里的Link时,事件会冒泡到表格行元素,触发了rowClick="edit"的跳转逻辑。只需给Link添加点击事件处理,阻止事件冒泡即可:
修改你的自定义字段组件代码:
import { useRecordContext } from 'react-admin'; import { Link } from 'react-router-dom'; export default () => { const campaign = useRecordContext(); const campaignUrlsPage = `/campaign/${campaign.id}/urls/`; const handleLinkClick = (e) => { // 阻止事件冒泡到父级行,避免触发rowClick的编辑跳转 e.stopPropagation(); }; return <Link to={campaignUrlsPage} onClick={handleLinkClick}>{campaign.id}</Link>; };
2. 修复useGetOne始终loading的问题
你代码里的useGetOne完全是多余的——既没用到返回的data,还可能因为资源名或参数错误导致请求一直未完成,才让isLoading始终为true。直接删掉这段代码即可,既能解决loading异常,还能减少不必要的API请求。
如果确实需要额外获取campaign数据,检查两个关键点:
- 资源名是否正确:你提到的是
campaigns资源,但代码里写的是'campaign',要改成'campaigns' - 确认
campaign.campaign_id是有效的资源ID,确保后端能正常返回数据
3. 验证效果
修改完成后,点击自定义字段里的Link会直接跳转到目标URL,不会触发编辑页面;点击行的其他区域,依然会触发rowClick="edit"的编辑操作,完全符合你的需求。
内容的提问来源于stack exchange,提问作者zzmaster
相关产品推荐
相关产品推荐

