React Admin同接口创建带不同筛选的多资源实现方案

React Admin 中 <Resource> 组件以name属性作为唯一标识，重复声明同名资源时，后加载的配置会直接覆盖前面的配置，这就是你写了两个properties资源最后只渲染最后一个的根本原因。

优先使用自定义菜单+自定义路由的方案，不需要重复声明资源，维护成本最低：

• 基础资源只声明一次
  只保留一个properties资源的声明，把公共的编辑、详情逻辑都挂在这个资源上，同时在Admin组件上绑定自定义菜单和自定义路由：

  import { Route } from 'react-router-dom';
  
  export default function App() {
    return (
      <Admin
        loginPage={CustomLoginPage}
        dataProvider={dataProvider}
        authProvider={authProvider}
        menu={CustomMenu}
        customRoutes={[
          <Route path="/properties/review" element={<PropertyReviewList />} />,
          <Route path="/properties/approved" element={<PropertyApprovedList />} />,
        ]}
      >
        <Resource
          name="properties"
          icon={UserIcon}
          show={PropertyShow}
          edit={PropertyEdit}
        />
      </Admin>
    );
  }
  

• 编写带固定筛选规则的列表组件
  两个列表组件复用原有列表的字段、操作栏配置，只修改筛选参数即可：

  import { List, Datagrid, TextField } from 'react-admin';
  
  // 审核中列表
  export const PropertyReviewList = () => (
    <List
      filterDefaultValues={{ status: 'review' }}
    >
      {/* 你的列表字段、操作栏配置，和原有列表完全一致 */}
      <Datagrid rowClick="show">
        <TextField source="name" />
        <TextField source="address" />
      </Datagrid>
    </List>
  );
  
  // 已审核通过列表
  export const PropertyApprovedList = () => (
    <List
      filterDefaultValues={{ status: 'approved' }}
    >
      <Datagrid rowClick="show">
        <TextField source="name" />
        <TextField source="address" />
      </Datagrid>
    </List>
  );
  

  注意：如果需要强制锁定status筛选，不允许用户在前端修改，可以把filterDefaultValues换成filter属性，写在filter里的参数会被强制附加到所有接口请求中，用户无法通过筛选栏修改。
• 自定义侧边栏菜单添加入口
  替换默认菜单，在菜单里添加两个独立入口，分别指向刚才配置的自定义路由：

  import { Menu } from 'react-admin';
  
  export const CustomMenu = () => (
    <Menu>
      <Menu.DashboardItem />
      <Menu.Item
        to="/properties/review"
        primaryText="Properties in review"
        leftIcon={<UserIcon />}
      />
      <Menu.Item
        to="/properties/approved"
        primaryText="Properties Approved"
        leftIcon={<UserIcon />}
      />
      <Menu.ResourceItems />
    </Menu>
  );
  

这个方案下，所有接口请求还是走properties对应的dataProvider逻辑，编辑、详情页的跳转也不会出现路径匹配问题，不需要额外修改公共组件逻辑。

备选方案：资源别名 #

如果两个列表需要完全独立的权限、字段配置，也可以给同一个接口起不同的资源别名：

• 把两个Resource的name分别改成properties_review、properties_approved，分别配置独立的list、show、edit组件
• 在dataProvider层拦截这两个别名资源的请求，统一转发到properties接口，同时自动拼接对应的status筛选参数
  这个方案需要手动处理编辑、详情页的跳转路径，避免路由匹配到错误的别名资源，维护成本更高，没有特殊需求不推荐使用。

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