Skip to content

Commit 98555ea

Browse files
authored
Merge pull request #6696 from WiXSL/doc-useredirect
[Doc] Improve `useRedirect` description and examples
2 parents b6bf2cd + 7202e42 commit 98555ea

File tree

1 file changed

+16
-6
lines changed

1 file changed

+16
-6
lines changed

docs/Actions.md

+16-6
Original file line numberDiff line numberDiff line change
@@ -710,10 +710,12 @@ const DashboardButton = () => {
710710
};
711711
```
712712

713-
The callback takes 3 arguments:
714-
- the page to redirect the user to ('list', 'create', 'edit', 'show', or a custom path)
715-
- the current `basePath`
716-
- the `id` of the record to redirect to (if any)
713+
The callback takes 5 arguments:
714+
- The page to redirect the user to ('list', 'create', 'edit', 'show', a function or a custom path)
715+
- The current `basePath`
716+
- The `id` of the record to redirect to (if any)
717+
- A record like object to be passed to the first argument, when the first argument is a function
718+
- A `state` to be set to the location
717719

718720
Here are more examples of `useRedirect` calls:
719721

@@ -724,9 +726,17 @@ redirect('list', '/posts');
724726
redirect('edit', '/posts', 1);
725727
// redirect to the post creation page:
726728
redirect('create', '/posts');
729+
// redirect to the result of a function
730+
redirect((redirectTo, basePath, id, data) => {
731+
return data.hasComments ? '/comments' : '/posts';
732+
}, '/posts', 1, { hasComments: true });
733+
// redirect to edit view with state data
734+
redirect('edit', '/posts', 1, {}, { record: { post_id: record.id } });
735+
// do not redirect (resets the record form)
736+
redirect(false);
727737
```
728738

729-
Note that `useRedirect` doesn't allow to redirect to pages outside the current React app. For that, you should use `document.location`.
739+
Note that `useRedirect` allows redirection to an absolute url outside the current React app.
730740

731741
### `useRefresh`
732742

@@ -926,7 +936,7 @@ const ApproveButton = ({ record }) => {
926936
};
927937
```
928938

929-
**Tip**: When using the Data Provider hooks for regular pages (List, Edit, etc), react-admin always specifies a custom action name, related to the component asking for the data. For instance, in the `<List>` page, the action is called `CRUD_GET_LIST`. So unless you call the Data Provider hooks yourself, no `CUSTOM_FETCH` action should be dispatched.
939+
**Tip**: When using the Data Provider hooks for regular pages (List, Edit, etc.), react-admin always specifies a custom action name, related to the component asking for the data. For instance, in the `<List>` page, the action is called `CRUD_GET_LIST`. So unless you call the Data Provider hooks yourself, no `CUSTOM_FETCH` action should be dispatched.
930940

931941
## Legacy Components: `<Query>`, `<Mutation>`, and `withDataProvider`
932942

0 commit comments

Comments
 (0)