flat-fuchsia•2y ago

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

kapa.ai•2y 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•2y ago

<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below

deep-jade•2y ago

Hello @dipbazz , could you send us your App.tsx

flat-fuchsia•2y ago

App.tsx

flat-fuchsia•2y ago

Here is my App.tsx file.

flat-fuchsia•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.

index.tsx

Omer•2y 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 🥁

flat-fuchsia•2y 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" /> 
)}

deep-jade•2y 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

flat-fuchsia•2y ago

Yeah adding a fallback did work.

Omer•2y ago

Wow cool Have all the issues been resolved?

flat-fuchsia•2y ago

Not yet 😬

deep-jade•2y ago

👀

flat-fuchsia•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?

Omer•2y 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 💯