`useRedirect`

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

Usage

import { useRedirect } from 'react-admin';
const DashboardButton = () => {
 const redirect = useRedirect();
 const handleClick = () => {
 redirect('/dashboard');
 }
 return <button onClick={handleClick}>Dashboard</button>;
};

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:

// redirect to the post list page
redirect('list', 'posts');
// redirect to the edit page of a post:
redirect('edit', 'posts', 1);
// redirect to the post creation page:
redirect('create', 'posts');
// redirect to edit view with state data
redirect('edit', 'posts', 1, {}, { record: { post_id: record.id } });

Note that useRedirect allows redirection to an absolute URL outside the current React app.

Tip: For even more specific navigation, you can use the useNavigate hook from react-admin as follows:

import { useNavigate } from 'react-admin';
const MyPageButton = () => {
 const navigate = useNavigate();
 const handleClick = () => {
 navigate(
 {
 pathname: '/some/path',
 search: '?query=string',
 hash: '#hash',
 },
 {
 state: { key: 'value' },
 }
 );
 }
 return <button onClick={handleClick}>My page</button>;
};

Redirect function

useRedirect allows you to redirect to the result of a function as follows:

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.

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:

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:

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