fair-rose•5mo ago

When on create or edit page goBack button doesn't redirect back to the list of the resource

When I am on create or edit page of resource, the goBack button doesn't redirect me to the list of the resource but rather to place I was before navigating to resource list page

5 Replies

kapa.ai•5mo ago

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue might be due to the goBack prop of the Create or Edit component not being properly defined. The goBack prop is used to customize the back button or to disable it. If your route has no :action parameter or your action is list, the back button will not be shown even if you pass a goBack property. You can override this behavior by using the headerProps property. Here is an example of how to use the goBack prop in the Create and Edit components: For Create:

import { useBack } from "@refinedev/core";  
import { Create } from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostCreate: React.FC = () => {  
 const back = useBack();  
 const BackButton = () => <Button>←</Button>;  
  
 return (  
 <Create goBack={<BackButton />} headerProps={{ onBack: back }}>  
 <p>Rest of your page here</p>  
 </Create>  
 );  
};

import { useBack } from "@refinedev/core";  
import { Create } from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostCreate: React.FC = () => {  
 const back = useBack();  
 const BackButton = () => <Button>←</Button>;  
  
 return (  
 <Create goBack={<BackButton />} headerProps={{ onBack: back }}>  
 <p>Rest of your page here</p>  
 </Create>  
 );  
};

For Edit:

import { useBack } from "@refinedev/core";  
import { Edit } from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostEdit: React.FC = () => {  
 const back = useBack();  
 const BackButton = () => <Button>←</Button>;  
  
 return (  
 <Edit goBack={<BackButton />} headerProps={{ onBack: back }}>  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

import { useBack } from "@refinedev/core";  
import { Edit } from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostEdit: React.FC = () => {  
 const back = useBack();  
 const BackButton = () => <Button>←</Button>;  
  
 return (  
 <Edit goBack={<BackButton />} headerProps={{ onBack: back }}>  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

In these examples, the useBack hook is used to navigate back to the previous page. The goBack prop is set to a BackButton component, and the onBack prop of headerProps is set to the back function returned by useBack. If you're still experiencing issues, it might be due to a bug in the framework. There was a similar issue reported on GitHub where clicking on the newly created back arrow component from a Create page redirected the solution not to the previous page, but to the previous previous page. This was due to an extra navigate.goBack() call in the component (source (https://github.com/refinedev/refine/issues/3358)). Sources: - Create goBack prop (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/create#goback) - Edit goBack prop (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/edit#goback) - GitHub issue (https://github.com/refinedev/refine/issues/3358) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

fair-rose•5mo ago

How can I override when does the bacl button redirect me? @kapa.ai How can I override when does the bacl button redirect me?

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can override the behavior of the back button by using the headerProps property in your Create, Edit, or Show components. The headerProps property allows you to pass additional props to the header of the page, including the onBack prop which is triggered when the back button is clicked. Here's an example of how you can use it:

import { useBack } from "@refinedev/core";  
import { Edit } from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostEdit: React.FC = () => {  
 const back = useBack();  
 const BackButton = () => <Button>←</Button>;  
  
 return (  
 <Edit goBack={<BackButton />} headerProps={{ onBack: back }}>  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

import { useBack } from "@refinedev/core";  
import { Edit } from "@refinedev/antd";  
import { Button } from "antd";  
  
const PostEdit: React.FC = () => {  
 const back = useBack();  
 const BackButton = () => <Button>←</Button>;  
  
 return (  
 <Edit goBack={<BackButton />} headerProps={{ onBack: back }}>  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};

In this example, the useBack hook is used to get a function that navigates back to the previous page. This function is then passed to the onBack prop of headerProps. When the back button is clicked, the onBack function is triggered, navigating back to the previous page. Sources: - Edit goBack prop (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/edit#goback) - Create goBack prop (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/create#goback) - Show goBack prop (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/show#goback) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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