Prevent react-admin from redirect to first page after each update? - react-admin

Question

using react-admin i created an app with sample list with many pages then i ran it. if i opened another page in the list and chose to edit a row or to delete it, the task done but the list is redirected to the first page and this is not good for user experience. if the user want to review multiple rows and edit them this will oblige him to return to the page each time he made edit. i am not sure if this is a how to question or a bug or feature that should be posted in github. i tested it in multiple react-admin versions 3.6.0, 3.5.5, 3.0.0 and the same behavior appeared.
// in src/App.js
import * as React from "react";
import { Admin, Resource } from "react-admin";
import jsonServerProvider from "ra-data-json-server";
import CommentList from "./comments";
const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");
const App = () => (
<Admin dataProvider={dataProvider}>
<Resource name="comments" list={CommentList} />
</Admin>
);
export default App;
import * as React from "react";
import {
List,
Datagrid,
TextField,
ReferenceField,
EmailField
} from "react-admin";
import { Fragment } from "react";
import { BulkDeleteButton } from "react-admin";
import ResetViewsButton from "./ResetViewsButton";
const PostBulkActionButtons = props => (
<Fragment>
<ResetViewsButton label="Reset Views" {...props} />
{/* default bulk delete action */}
<BulkDeleteButton {...props} />
</Fragment>
);
const CommentList = props => (
<List {...props} bulkActionButtons={<PostBulkActionButtons />}>
<Datagrid rowClick="edit">
<ReferenceField source="postId" reference="posts">
<TextField source="id" />
</ReferenceField>
<TextField source="id" />
<TextField source="name" />
<EmailField source="email" />
<TextField source="body" />
</Datagrid>
</List>
);
export default CommentList;
import * as React from "react";
import { Button, useUpdateMany, useNotify, useUnselectAll } from "react-admin";
import { VisibilityOff } from "#material-ui/icons";
const ResetViewsButton = props => {
const notify = useNotify();
const unselectAll = useUnselectAll();
console.log(props.selectedIds);
console.log(props.basePath);
const [updateMany, { loading }] = useUpdateMany(
"comments",
props.selectedIds,
{ emails: "" },
{
onSuccess: () => {
notify("comments updated");
unselectAll("comments");
},
onFailure: error => notify("Error: comments not updated", "warning")
}
);
return (
<Button
label="simple.action.resetViews"
disabled={loading}
onClick={updateMany}
>
<VisibilityOff />
</Button>
);
};
export default ResetViewsButton;

Answer 1

You can use "useRedirect" If I am not getting you wrong. You want to redirect after edit info.
import { useRedirect } from 'react-admin';
const ResetViewsButton = props => {
const notify = useNotify();
const redirectTo = useRedirect();
const unselectAll = useUnselectAll();
console.log(props.selectedIds);
console.log(props.basePath);
const [updateMany, { loading }] = useUpdateMany(
"comments",
props.selectedIds,
{ emails: "" },
{
onSuccess: () => {
notify("comments updated");
unselectAll("comments");
redirectTo('/url');
},
onFailure: error => notify("Error: comments not updated", "warning")
}
);
return (
<Button
label="simple.action.resetViews"
disabled={loading}
onClick={updateMany}
>
<VisibilityOff />
</Button>
);
};
export default ResetViewsButton;

Answer 2

it was a bug. wait version 3.6.1