My layout resource name is not displayed after upgrading to refine v4.
I have upgraded my refine project to v4 and followed the migration guide but after upgrading My menu name in sider is not displayed except the parent name and logout.
21 Replies
Hey @dipbazz! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
It looks like you may have missed the step in the Migration Guide (https://refine.dev/docs/migration-guide) to update the
label
property of your resources
in the <Refine>
component.
The label
property is used to display the name of the resource in the menu. By default, the plural form of the resource name is shown. If you want to customize the name, you can set the label
property to the desired name.
For example, if your resource name is post
, you can set the label
property to Posts
to display Posts
in the menu.
For more information, please refer to the <Refine>
docs (https://refine.dev/docs/api-reference/core/components/refine-config).
----------------------<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below
harsh-harlequin•2y ago
Hello @dipbazz , could you send us your App.tsx
optimistic-goldOP•2y ago
optimistic-goldOP•2y ago
Here is my App.tsx file.
optimistic-goldOP•2y ago
Hey @batuhanw, I guess this error is because of my sider component. Can you explain how can I render my sider component. Here is my sider component.
There's a topic we forgot to mention in the Migration Guide. You should only use useRouterContext() in legacy routers. For new router users, the useLink() hook can be used instead. Therefore, in your 'Sider' component, use useLink instead of useRouterContext:
Sider.tsx
We will send a patch regarding the use of 'label' in Sider. We will keep you informed 🥁
optimistic-goldOP•2y ago
After using
useLink
I get an error as
harsh-harlequin•2y ago
I guess
route
can be undefined, which Link component doesn't like, can you add fallback?
Let me know if that fixes your issue
We'll check if something is missingoptimistic-goldOP•2y ago
Yeah adding a fallback did work.
Wow cool
Have all the issues been resolved?
optimistic-goldOP•2y ago
Not yet 😬
harsh-harlequin•2y ago
👀
optimistic-goldOP•2y ago
Now I am facing the issue with my Authorization. I have used cerbos for my authorization and it is working fine with my sider menu. But after upgrading to v4 it now only works for the sider menu and controls the route based on authorization. But whenever I go the page using the url in brower which the user don't have access to it, it is not restricted. Should I use the CanAccess component and wrap the whole route same as Authenticated?
We missed something, yes you are right, you need to wrap it with the CanAccess component. We will update our documentation accordingly. Thank you for reporting it 💯
rival-black•2y ago
I have the same error with casbin.js
harsh-harlequin•2y ago
Hello @RomaY , please see the updated documentation here https://refine.dev/docs/migration-guide/router-provider/#behavioral-changes-in-routing
Migrating Router Provider from 3.x.x to 4.x.x | refine
Motivation behind the changes
rival-black•2y ago
When I enter in the url line the pages to which access should be closed, they are loaded, but they are not in sider, how should I configure it with casbin?
harsh-harlequin•2y ago
Hello @RomaY did you try to wrap related pages with <CanAccess> component? https://refine.dev/docs/api-reference/core/providers/accessControl-provider/#canaccess-
Access Control Provider | refine
Access control is a broad topic where there are lots of advanced solutions that provide different set of features. refine is deliberately agnostic for its own API to be able to integrate different methods (RBAC, ABAC, ACL, etc.) and different libraries (Casbin, CASL, Cerbos, AccessControl.js). can method would be the entry point for those soluti...
rival-black•2y ago
Oh yes it works, I just wrapped my element in a router, not in the component itself, or is that a bad idea?
harsh-harlequin•2y ago
Do you mean, Element prop of the router? If that's so, I think that's a matter of taste. I personally would do like you, so I can see authorized resources in a single page