multiple menu entries pointing to the same resource
Is possible to have in the sidebar multiple items pointing to the same resource but changing the querystring params. Ej:
Customer Group 1 -->/customer?groupid=1
Customer Group 2 -->/customer?groupid=2
Customer Group 3 -->/customer?groupid=3
5 Replies
Hi @nikun. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, it is possible to have multiple items in the sidebar pointing to the same resource but with different query string parameters. You can achieve this by using the
render
property of the <Sider>
component. Here's an example:
This example uses the render
property to customize the sidebar and add the desired navigation links with different query string parameters for the same resource (source (https://refine.dev/docs/faq#how-can-i-add-an-item-to-the-sider-component)).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------FAQ | refine
How can I change the form data before submitting it to the API?
<@710515912771502200> kapa.ai is still learning and improving, please let us how it did by reacting below
rare-sapphire•17mo ago
Hey @nikun, you can define multiple resource items with same
name
, all you need to do is to assign unique identifier
properties to them, this way they will be rendered separately in the sider. I've created a simple example for it. I've hidden the main customers
resource item in the sider using the meta.hide
property but that's completely optional 😅
https://codesandbox.io/p/sandbox/charming-kilby-2cujxt?file=%2Fsrc%2FApp.tsx%3A1%2C1charming-kilby-2cujxt
CodeSandbox is an online editor tailored for web applications.
rare-sapphire•17mo ago
One little missing thing is the active item with group id is not highlighted since the actual resource match is done for the
customers
resource but not for the ones with query string. This is happening becase we strip out the query parameters when inferring the resource from the url by matching the action routes with the current path.
If this is critical, you can either swizzle
the Sider
component as you like or switch to parameters instead of query parameters like /customers/group/:groupId
.