React-admin v4.0自定义标签栏切换时出现Not found问题排查

你当前的问题是：在React-admin v4中自定义布局添加标签栏切换用户分类时，切换标签会触发“Not found”错误，但侧边栏切换后页面能正常显示；使用默认AppBar则无此问题。

问题根源 #

1. 动态卸载/注册导致路由不同步：你通过selectedTab条件渲染，切换标签时旧的被卸载，新的才注册，但此时路由已经跳转到新路径，React-admin的路由表还未更新，导致路由不匹配触发404。
2. 标签切换未走React-admin导航体系：直接修改selectedTab状态切换Resource，没有通过React-admin的路由导航机制同步路由状态，而侧边栏点击是触发了标准的路由导航，此时路由表已包含对应Resource的路由，所以能正常渲染。

解决方案 #

方案一：保留多Resource，通过路由导航切换标签

不要动态渲染，先注册所有需要的Resource，然后让标签栏通过React-admin的路由链接切换，确保路由和Resource注册同步。

1. 修改自定义标签栏，使用react-router-dom的Link组件跳转到对应Resource的路由：

import { Link, useLocation } from 'react-router-dom';
import { Layout } from 'react-admin';

const MyTabBar = () => {
  const location = useLocation();
  const tabConfig = [
    { label: '全部用户', path: 'users' },
    { label: '已通过', path: 'approved' },
    { label: '待审核', path: 'pending' },
    { label: '已拒绝', path: 'declined' },
  ];

  return (
    <div style={{ display: 'flex', gap: '1rem', padding: '1rem 0', borderBottom: '1px solid #eee' }}>
      {tabConfig.map(tab => (
        <Link
          key={tab.path}
          to={`/${tab.path}`}
          style={{
            padding: '0.5rem 1rem',
            borderBottom: location.pathname === `/${tab.path}` ? '2px solid #1976d2' : 'none',
            textDecoration: 'none',
            color: location.pathname === `/${tab.path}` ? '#1976d2' : '#333',
            fontWeight: location.pathname === `/${tab.path}` ? 'bold' : 'normal',
          }}
        >
          {tab.label}
        </Link>
      ))}
    </div>
  );
};

const MyLayout_1 = ({ children }) => {
  return (
    <Layout appBar={() => <></>}>
      {children}
      <MyTabBar />
    </Layout>
  );
};

2. 在Admin组件中一次性注册所有Resource，不再用条件渲染：

import { Admin, Resource } from 'react-admin';
import { UserList } from 'components/UserList';

export const App = () => {
  return (
    <Admin dataProvider={dataProvider} layout={MyLayout_1}>
      <Resource name="users" list={UserList} />
      <Resource name="approved" list={UserList} />
      <Resource name="pending" list={UserList} />
      <Resource name="declined" list={UserList} />
    </Admin>
  );
};

3. 在UserList组件中根据当前Resource名称过滤数据：
   通过useResourceContext获取当前渲染的Resource名称，以此调整数据请求或过滤逻辑：

import { List, Datagrid, TextField, useResourceContext } from 'react-admin';

export const UserList = () => {
  const currentResource = useResourceContext();
  // 根据当前Resource名称设置过滤条件
  const filter = currentResource === 'users' 
    ? {} 
    : { status: currentResource };

  return (
    <List filters={filter}>
      <Datagrid rowClick="edit">
        <TextField source="id" />
        <TextField source="name" />
        <TextField source="email" />
        <TextField source="status" />
      </Datagrid>
    </List>
  );
};

方案二：单Resource+路由参数切换分类

如果不需要多个Resource路由，可以只用一个users Resource，通过URL参数（如/users?status=approved）来区分分类，标签栏切换时修改URL参数，UserList组件读取参数过滤数据。这种方式更简洁，避免多Resource的冗余。

1. 标签栏修改为跳转到带参数的路由：

const MyTabBar = () => {
  const location = useLocation();
  const tabConfig = [
    { label: '全部用户', status: '' },
    { label: '已通过', status: 'approved' },
    { label: '待审核', status: 'pending' },
    { label: '已拒绝', status: 'declined' },
  ];

  return (
    <div style={{ display: 'flex', gap: '1rem', padding: '1rem 0' }}>
      {tabConfig.map(tab => {
        const searchParams = new URLSearchParams(location.search);
        if (tab.status) searchParams.set('status', tab.status);
        else searchParams.delete('status');
        const tabUrl = `/users?${searchParams.toString()}`;

        return (
          <Link
            key={tab.status}
            to={tabUrl}
            style={{
              padding: '0.5rem 1rem',
              borderBottom: location.pathname === '/users' && searchParams.get('status') === tab.status ? '2px solid #1976d2' : 'none',
              textDecoration: 'none',
              color: location.pathname === '/users' && searchParams.get('status') === tab.status ? '#1976d2' : '#333',
            }}
          >
            {tab.label}
          </Link>
        );
      })}
    </div>
  );
};

2. Admin组件只注册一个Resource：

<Admin dataProvider={dataProvider} layout={MyLayout_1}>
  <Resource name="users" list={UserList} />
</Admin>

3. UserList读取URL参数过滤数据：

import { List, Datagrid, TextField, useListContext } from 'react-admin';

export const UserList = () => {
  const { filterValues } = useListContext();
  // filterValues中会包含URL参数里的status
  return (
    <List>
      <Datagrid rowClick="edit">
        <TextField source="id" />
        <TextField source="name" />
        <TextField source="email" />
        <TextField source="status" />
      </Datagrid>
    </List>
  );
};

总结 #

你的原代码问题出在动态条件渲染，导致React-admin的路由表无法及时同步。通过上述两种方案，要么让Resource提前注册并通过路由导航切换，要么用单Resource+URL参数的方式，都能解决“Not found”的问题。

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