List page not Rerendering

brilliant-lime · 2023-10-24T06:28:55.794Z

I have modules listed in sider ,when i click on alredy selected sider it shouild rerender but it is not. i want the list to rerender if i select it again.

K

kapa.ai•10/24/23, 6:28 AM

Hi @MarcoNix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•10/24/23, 6:29 AM

----------------------
Based on the information provided in the extracts, the

Sider

Sider

Sider

Sider component in Refine has a prop called

activeItemDisabled

activeItemDisabled

activeItemDisabled

activeItemDisabled which controls whether clicking on an active sider item should reload the page. If you set

activeItemDisabled

activeItemDisabled

activeItemDisabled

activeItemDisabled to

false

false

, the page should reload when you click on an already selected item in the

Sider

Sider

Sider

Sider.

Here is an example of how to use the

activeItemDisabled

activeItemDisabled

activeItemDisabled

activeItemDisabled prop:

<Sider  
 activeItemDisabled={false}
 render={({ items, logout, collapsed }) => {  
 return (  
 <>
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>
 );  
 }}  
/>

<Sider  
 activeItemDisabled={false}
 render={({ items, logout, collapsed }) => {  
 return (  
 <>
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>
 );  
 }}  
/>

<Sider  
 activeItemDisabled={false}
 render={({ items, logout, collapsed }) => {  
 return (  
 <>
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>
 );  
 }}  
/>

<Sider  
 activeItemDisabled={false}
 render={({ items, logout, collapsed }) => {  
 return (  
 <>
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>
 );  
 }}  
/>

In this example, setting

activeItemDisabled

activeItemDisabled

activeItemDisabled

activeItemDisabled to

false

false

means that clicking on an active item in the

Sider

Sider

Sider

Sider will reload the page.

For more information, you can refer to the Refine Sider Documentation (https://refine.dev/docs/api-reference/mui/components/mui-themed-layout/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•10/24/23, 6:29 AM

@942824607818317905 kapa.ai is still learning and improving, please let us know how it did by reacting below

B

brilliant-lime•10/24/23, 7:27 AM

<Sider /> is using link https://github.com/refinedev/refine/blob/next/packages/mui/src/components/themedLayoutV2/sider/index.tsx#L227
due to nature of routing libraries, route can't change if link is same as current pathname

In this case, unfortunately, you have to swizzle the sider and handle the route programmatically.

B

brilliant-limeOP•10/24/23, 7:54 AM

@alicanerdurmaz Why am trying to do this is because ,i have added a filter to the listing page ,when i come from another page the listing works and at that time when i click on the same listing icon it wont rerun api call.

B

brilliant-limeOP•10/24/23, 12:36 PM

I try customizing the link ,but when i click on the module button makes complete app re render