Nesting routes
How can I nest routes on Navbar? Let's say I have: InventoryProducts and InventoryMaterials resources. On navbar I want to have Inventory which itself won't be a resource but will rather show dropdown so user can click on Products or Materials under Inventory.
9 Replies
Hi @beg1c. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Refine allows you to define nested routes in your application. However, the default
Sider
component does not support multi-level menus or nested resources. You can define custom routes to create your routes in any shape you want.
Here's an example of how you can define a nested resource:
In this example, the users
resource is nested under the cms
resource. The meta
property is used to specify the parent of the users
resource.
However, for your specific case where you want to have a dropdown in the navbar for Inventory
that includes Products
and Materials
, you might need to create a custom component for the navbar that supports dropdown menus.
You can refer to the Refine documentation (https://refine.dev/docs/advanced-tutorials/custom-pages/#public-custom-pages) for more information on how to create custom pages and routes.
Please note that the team behind Refine is planning to make changes to the way routing is handled to allow users more freedom in designing their apps, including better support for nested routes and resources. This is expected to be part of a future major release.
For more information on how to use nested routes with Refine, you can refer to the Refine documentation on nested routes (https://refine.dev/docs/routing/integrations/remix#can-i-use-nested-routes).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1212763978803974237> kapa.ai is still learning and improving, please let us know how it did by reacting below
ambitious-aqua•7mo ago
@kapa.ai How can I specify route for resource call. For resource='materials' I want to call 'inventory/materials'. If i change name to resource='inventory/materials', then it is not shown on sidebar.
Let me check the knowledge base for you. One moment! :books:
----------------------
In Refine, you can specify custom routes for your resources using the
resources
prop in the <Refine>
component. You can define your actions (list
, create
, edit
, show
, clone
) as paths instead of components. This allows you to define custom routes for actions and take advantage of the full potential of your router without being restricted to the routes created automatically.
Here's an example of how you can define a custom route for the list
action of the materials
resource:
In this example, the list
action for the materials
resource will use the /inventory/materials
route.
However, if you change the name
of the resource to inventory/materials
, it won't be shown in the sidebar because the <Sider>
component uses the resources
property of the <Refine>
component to render the navigation links, and it expects the name
of the resource to be a single word without slashes.
For more information on how to use custom routes with Refine, you can refer to the Refine documentation on routing (https://refine.dev/docs/guides-concepts/routing#relationship-between-resources-and-routes-).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1212763978803974237> kapa.ai is still learning and improving, please let us know how it did by reacting below
ambitious-aqua•7mo ago
@kapa.ai Is there a way to hide resource from sidebar?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, you can hide a resource from the sidebar in Refine. This can be done by using the
meta.hide
property of the resource in the resources
prop of the <Refine>
component.
Here's an example of how you can hide a resource from the sidebar:
In this example, the users
resource will be hidden from the sidebar, but it will still be accessible via the URL.
For more information on how to hide resources from the sidebar, you can refer to the Refine documentation on the <Refine>
component (https://refine.dev/docs/core/refine-component#meta).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1212763978803974237> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•7mo ago
Hello @beg1c ,
kapa.ai is now available for free at https://refine.dev/docs!
To improve our community interaction on the Refine Discord server and keep our focus on Q&A sharing, we invite you to our website to use kapa.ai.
—