React Admin自定义路由至Show视图遇问题求助

1. 修正URL参数获取方式（核心问题） #

React Router v6+已不再通过组件props传递match对象，你代码里的props.match.params.id是v5的写法，这是组件无法获取id的直接原因。

修改自定义路由，直接渲染CustomShow即可，无需在element内处理参数：

<CustomRoutes>
    <Route path="/customUserView/:id/show" element={<CustomShow resource="user" />} />
</CustomRoutes>

然后在CustomShow组件内部，用useParams钩子获取id：

import { useParams } from 'react-router-dom';
import { Show, SimpleShowLayout, TextField } from 'react-admin';

const CustomShow = ({ resource }) => {
    const { id } = useParams();
    return (
        <Show resource={resource} id={id}>
            <SimpleShowLayout>
                {/* 替换为你的自定义字段 */}
                <TextField source="name" />
                <TextField source="email" />
            </SimpleShowLayout>
        </Show>
    );
};

2. 确保组件处于React Admin上下文内 #

CustomShow依赖React Admin的内部上下文（比如数据提供者、权限校验等），好在CustomRoutes本身就是Admin组件的子元素，只要路由配置在Admin内部，这一步就没问题。如果出现上下文相关错误，检查组件层级，确保CustomShow没有脱离Admin的包裹范围。

3. 手动控制数据获取（可选） #

如果需要更精细的控制，可直接用ShowController组件管理数据加载逻辑，避免依赖Show组件的自动参数处理：

import { useParams } from 'react-router-dom';
import { ShowController, SimpleShowLayout, TextField } from 'react-admin';

const CustomShow = ({ resource }) => {
    const { id } = useParams();
    return (
        <ShowController resource={resource} id={id}>
            {({ record, loading, error }) => {
                if (loading) return <div>加载中...</div>;
                if (error) return <div>加载失败：{error.message}</div>;
                if (!record) return <div>未找到用户数据</div>;

                return (
                    <SimpleShowLayout record={record}>
                        <TextField source="name" />
                        <TextField source="email" />
                    </SimpleShowLayout>
                );
            }}
        </ShowController>
    );
};

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