javascript - 从 React Admin 中的同一端点创建多个资源以应用不同的过滤器

标签 javascript reactjs react-admin

我需要在 React admin 中创建不同的路由,所有路由都基于相同的端点但具有不同的过滤器。我的需要是我需要一个菜单​​条目来显示所有状态为已批准的属性,所有状态为审核的属性等等。 我试过这样做:

export default function App() {
  return (
    <Admin
      loginPage={CustomLoginPage}
      dataProvider={dataProvider}
      authProvider={authProvider}
    >
      <Resource
        name="properties"
        options={{ label: 'Properties in review' }}
        icon={UserIcon}
        list={PropertyReviewList}
        show={PropertyShow}
        edit={PropertyEdit}
      />
      <Resource
        name="properties"
        options={{ label: 'Properties Approved' }}
        icon={UserIcon}
        list={PropertyApprovedList}
        show={PropertyShow}
        edit={PropertyEdit}
      />
    </Admin>
  );
}

但这不起作用,因为只显示了最后定义的属性。实现我想要实现的目标的最佳方法是什么?

最佳答案

如果我对您的理解是正确的,您需要一个组件来呈现不同的数据,具体取决于可以更改的链接的某些部分。

这可以使用查询参数来实现。这是来自 React 路由器文档的交互式代码示例,它可以满足您的需要: https://v5.reactrouter.com/web/example/query-parameters

因此,您的页面将有一个链接,如“/properties?status=review”,其中 status 是查询参数。您在组件中检查它以根据其值显示数据

关于javascript - 从 React Admin 中的同一端点创建多个资源以应用不同的过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72583520/

相关文章:

javascript - 处理状态并传递给组件/react.js

JavaScript 和 CSS 类未按预期运行

javascript - canvas html5 无法关闭绘图的问题

node.js - Redux-Thunk "Actions must be plain objects. Use custom middleware for async actions."

reactjs - 嵌套菜单(子菜单)

javascript - Scrollspy jquery 不适用于 Firefox、Opera

javascript - ReactJS 文本输入

node.js - 术语 'CI=false' 未被识别为 cmdlet、函数、脚本文件或可运行程序的名称

javascript - 填写表单后动态向对象添加新键

css - 在使用 react-admin 时尝试模拟空白页面,但 z-index 未将 div 覆盖在菜单/侧边栏上