React-admin表格行无法点击,无法跳转至Show页面求助
解决React-admin Datagrid行无法点击跳转至Show页面的问题
针对你遇到的Datagrid行无点击反馈、无法进入Show页面的问题,可按以下步骤排查修复:
确认数据中存在有效
id字段
React-admin依赖每条记录的id字段作为唯一标识,若DataProvider返回的用户数据中id为空、不存在或字段名不是id(比如用了userId),Datagrid无法生成跳转链接。可通过控制台打印接口返回结果验证:// 在浏览器控制台执行,替换为你的DataProvider实例 DataProvider.getList('users', { pagination: { page: 1, perPage: 10 }, sort: { field: 'id', order: 'ASC' } }) .then(res => console.log(res.data));若
id字段名不是id,需在Resource中指定identifier属性:<Resource name="users" identifier="userId" list={UsersList} show={UserShow}/>显式设置Datagrid的
rowClick属性
虽然默认行为是点击行跳转到Show页面,但显式声明可排除隐式配置问题:<Datagrid rowClick="show"> <TextField source="id" /> {/* 其他字段 */} </Datagrid>验证Show页面可手动访问
在浏览器地址栏手动输入类似/users/1的路径(替换为实际存在的用户id),若无法打开Show页面,说明问题出在Show组件或DataProvider的getOne方法:- 检查DataProvider的
getOne方法是否能正确返回指定id的用户数据 - 确认UserShow组件的
Show标签是否正确接收路由参数
- 检查DataProvider的
排除权限拦截
若配置了authProvider,需确认其允许访问users资源的show操作。可暂时移除authProvider测试,若此时行可点击,则需调整authProvider的权限逻辑。显式传递resource和basePath到List组件
虽然React-admin会自动传递上下文参数,但显式传入可避免上下文传递异常:export const UsersList = ({ resource, basePath }) => { return ( <List resource={resource} basePath={basePath} filters={userFilters}> <Datagrid rowClick="show"> {/* 字段 */} </Datagrid> </List> ); };
内容的提问来源于stack exchange,提问作者Lebonsavane
相关产品推荐
相关产品推荐

