Skip to content
Merged
32 changes: 32 additions & 0 deletions docs/Buttons.md
Original file line number Diff line number Diff line change
Expand Up @@ -598,6 +598,14 @@ const PostList = () => (

It also supports [all the other `<Button>` props](#button).

### `scrollToTop`

By default, react-admin scrolls the page to the top after redirecting to the create view. You can disable it as follows:

```jsx
const CloneButtonWithoutScrollToTop = () => <CloneButton scrollToTop={false} />
```

### Access Control

If you want to control whether this button should be displayed based on users permissions, use the `<CloneButton>` exported by the `@react-admin/ra-rbac` Enterprise package.
Expand Down Expand Up @@ -689,6 +697,14 @@ It also supports [all the other `<Button>` props](#button).

**Tip:** To allow users to create a record without leaving the current view, use the [`<CreateInDialogButton>`](./CreateInDialogButton.md) component.

### `scrollToTop`

By default, react-admin will scroll the page to the top after redirecting. You can disable it as follows:

```jsx
const CreateButtonWithoutScrollToTop = () => <CreateButton scrollToTop={false} />
```

### `sx`: CSS API

| Rule name | Description |
Expand Down Expand Up @@ -962,6 +978,14 @@ It also supports [all the other `<Button>` props](#button).

**Tip:** To allow users to edit a record without leaving the current view, use the [`<EditInDialogButton>`](./EditInDialogButton.md) component.

### `scrollToTop`

By default, react-admin will scroll the page to the top after redirecting. You can disable it as follows:

```jsx
const EditButtonWithoutScrollToTop = () => <EditButton scrollToTop={false} />
```

### Access Control

If your `authProvider` implements [Access Control](./Permissions.md#access-control), `<EditButton>` will only render if the user has the "edit" access to the related resource.
Expand Down Expand Up @@ -1191,6 +1215,14 @@ It also supports [all the other `<Button>` props](#button).

**Tip**: If you want to link to the Show view manually, use the `/{resource}/{record.id}/show` location.

### `scrollToTop`

By default, react-admin will scroll the page to the top after redirecting. You can disable it as follows:

```jsx
const ShowButtonWithoutScrollToTop = () => <ShowButton scrollToTop={false} />
```

### Access Control

If your `authProvider` implements [Access Control](./Permissions.md#access-control), `<ShowButton>` will only render if the user has the "show" access to the related resource.
Expand Down
67 changes: 54 additions & 13 deletions docs/useRedirect.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: "useRedirect"

This hook returns a function that redirects the user to another page.

## Usage

```jsx
import { useRedirect } from 'react-admin';

Expand All @@ -20,13 +22,14 @@ const DashboardButton = () => {
```

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

Here are more examples of `useRedirect` calls:
- The page to redirect the user to ('list', 'create', 'edit', 'show', a function or a custom path)
- The current `resource`
- The `id` of the record to redirect to (if any)
- A record-like object to be passed to the first argument, when the first argument is a function
- A `state` to be set to the location

Here are more examples of `useRedirect` calls:

```jsx
// redirect to the post list page
Expand All @@ -35,14 +38,8 @@ redirect('list', 'posts');
redirect('edit', 'posts', 1);
// redirect to the post creation page:
redirect('create', 'posts');
// redirect to the result of a function
redirect((resource, id, data) => {
return data.hasComments ? '/comments' : '/posts';
}, 'posts', 1, { hasComments: true });
// redirect to edit view with state data
redirect('edit', 'posts', 1, {}, { record: { post_id: record.id } });
// do not redirect (resets the record form)
redirect(false);
Comment on lines -38 to -45
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you remove those?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To isolate it in their own chapter

```

Note that `useRedirect` allows redirection to an absolute URL outside the current React app.
Expand All @@ -68,4 +65,48 @@ const MyPageButton = () => {
}
return <button onClick={handleClick}>My page</button>;
};
```
```

## Redirect function

`useRedirect` allows you to redirect to the result of a function as follows:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This deserves more examples as you can also return an object as expected by useNavigate


```jsx
redirect((resource, id, data) => {
return data.hasComments ? '/comments' : '/posts';
}, 'posts', 1, { hasComments: true });
```

Your function can also return an object containing a `pathname` and optionally some keys of [a `NavigateOptions` object](https://api.reactrouter.com/dev/interfaces/react_router.NavigateOptions.html).

```jsx
redirect((resource, id, data) => {
return {
pathname: `/${resource}/1`,
state: { record: { id: 1, foo: 'bar' } },
flushSync: true,
preventScrollReset: true,
replace: false,
viewTransition: true,
};
});
```

## Disable Scroll To Top

By default, react-admin scrolls to top on each redirection. You can disable it by passing a `_scrollToTop: false` option in the 5th argument:

```jsx
redirect(`/deals/${deal.id}/show`, undefined, undefined, undefined, {
_scrollToTop: false,
});
```

## Reset the record form

`useRedirect` resets the record form, so you can use the `redirect` function to reset it without redirecting as follows:

```jsx
// do not redirect (resets the record form)
redirect(false);
```
Loading