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

发布于 2025-02-06 12:05:53 字数 818 浏览 0 评论 0原文

我需要在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>
  );
}

但这并不是仅仅是最后一个定义的属性所显示的。实现我要实现的目标的最佳方法是什么?

I need to create different routes in React admin, all based on the same endpoint but with a different filter. My need is that I need a Menu entry to show all properties with status = approved, all properties with status = review and so on.
I tried doing this:

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>
  );
}

but this is not working as only the last defined property is showing. What is the best way to achieve what I am trying to achieve?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

护你周全 2025-02-13 12:05:54

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

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

因此,您将为您的页面提供一个链接,例如“/properties?status =评论”查询参数在哪里。您在组件中检查它以显示数据的值

If I understood you correctly, you need a component that renders different data depending on some part of the link that can change.

This can be achieved using query params. Here is an interactive code example from react router docs that does what you need:
https://v5.reactrouter.com/web/example/query-parameters

So, you will have a link for your page like "/properties?status=review" where status is the query param. You check it in your component to show data depending on its value

柒七 2025-02-13 12:05:54

状态=已批准,所有具有状态的属性=查看

查询中输入这些属性。示例:

axios.get("/api/...?status=approved")
axios.get("/api/...?status=review")

将这些API调用您需要的地方。您可以在后端有一个控制器来处理这两个请求。

status = approved, all properties with status = review

Enter these properties in query. Example:

axios.get("/api/...?status=approved")
axios.get("/api/...?status=review")

Makes these api calls where you need it. You can have a single controller in backend to handle both the requests.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文