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

Question

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?

Answer 1

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

Answer 2

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.