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?
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
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.