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.
No description
21 Replies
kapa.ai
kapa.ai2y ago
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.
import { Refine } from "@pankod/refine-core";
import {
notificationProvider,
Layout,
ErrorComponent,
} from "@pankod/refine-antd";
import dataProvider from "@pankod/refine-simple-rest";
import routerProvider from "@pankod/refine-react-router";

import "@pankod/refine-antd/dist/reset.css";

import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";

const API_URL = "https://api.fake-rest.refine.dev";

const App: React.FC = () => {
return (
<Refine
authProvider={authProvider}
dataProvider={dataProvider(API_URL)}
routerProvider={routerProvider}
resources={[
{
name: "posts",
list: PostList,
create: PostCreate,
edit: PostEdit,
show: PostShow,
label: "Posts" // <-- Add this line
},
]}
notificationProvider={notificationProvider}
Layout={Layout}
catchAll={<ErrorComponent />}
/>
);
};
import { Refine } from "@pankod/refine-core";
import {
notificationProvider,
Layout,
ErrorComponent,
} from "@pankod/refine-antd";
import dataProvider from "@pankod/refine-simple-rest";
import routerProvider from "@pankod/refine-react-router";

import "@pankod/refine-antd/dist/reset.css";

import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";

const API_URL = "https://api.fake-rest.refine.dev";

const App: React.FC = () => {
return (
<Refine
authProvider={authProvider}
dataProvider={dataProvider(API_URL)}
routerProvider={routerProvider}
resources={[
{
name: "posts",
list: PostList,
create: PostCreate,
edit: PostEdit,
show: PostShow,
label: "Posts" // <-- Add this line
},
]}
notificationProvider={notificationProvider}
Layout={Layout}
catchAll={<ErrorComponent />}
/>
);
};
For more information, please refer to the <Refine> docs (https://refine.dev/docs/api-reference/core/components/refine-config). ----------------------
kapa.ai
kapa.ai2y ago
<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below
reduced-jade
reduced-jade2y ago
Hello @dipbazz , could you send us your App.tsx
extended-salmon
extended-salmonOP2y ago
extended-salmon
extended-salmonOP2y ago
Here is my App.tsx file.
extended-salmon
extended-salmonOP2y 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.
Omer
Omer2y ago
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
import { useLink } from "@refinedev/core";

const Link = useLink();
import { useLink } from "@refinedev/core";

const Link = useLink();
We will send a patch regarding the use of 'label' in Sider. We will keep you informed 🥁
extended-salmon
extended-salmonOP2y ago
After using useLink I get an error as
ERROR in src/components/layout/sider/index.tsx:93:19
TS2322: Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.
<Link to={route}>{label}</Link> ^^
{!collapsed && isSelected && (
<div className="ant-menu-tree-arrow" />
)}
ERROR in src/components/layout/sider/index.tsx:93:19
TS2322: Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.
<Link to={route}>{label}</Link> ^^
{!collapsed && isSelected && (
<div className="ant-menu-tree-arrow" />
)}
reduced-jade
reduced-jade2y ago
I guess route can be undefined, which Link component doesn't like, can you add fallback?
<Link to={route ?? "/"}>{label}</Link>
<Link to={route ?? "/"}>{label}</Link>
Let me know if that fixes your issue We'll check if something is missing
extended-salmon
extended-salmonOP2y ago
Yeah adding a fallback did work.
Omer
Omer2y ago
Wow cool Have all the issues been resolved?
extended-salmon
extended-salmonOP2y ago
Not yet 😬
reduced-jade
reduced-jade2y ago
👀
extended-salmon
extended-salmonOP2y 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?
Omer
Omer2y ago
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 💯
deep-jade
deep-jade2y ago
I have the same error with casbin.js
reduced-jade
reduced-jade2y ago
deep-jade
deep-jade2y 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?
reduced-jade
reduced-jade2y 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...
deep-jade
deep-jade2y ago
Oh yes it works, I just wrapped my element in a router, not in the component itself, or is that a bad idea?
reduced-jade
reduced-jade2y 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

Did you find this page helpful?