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
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
:
For 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:
----------------------<@95552725294518272> kapa.ai is still learning and improving, please let us know how it did by reacting below
exotic-emerald•7mo 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?
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:
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:
----------------------<@95552725294518272> kapa.ai is still learning and improving, please let us know how it did by reacting below