防止每次更新后从react-admin重定向到首页？

Question

使用react-admin，我创建了一个带有很多页面的示例列表的应用程序，然后运行了它。如果我在列表中打开了另一个页面并选择编辑一行或将其删除，则该任务已完成，但该列表被重定向到了第一页，这不利于用户体验。如果用户要查看多行并进行编辑，这将使他有义务在每次进行编辑时返回到该页面。我不确定这是否是一个问题或应该在github中发布的错误或功能。我在多个react-admin版本3.6.0、3.5.5、3.0.0中对其进行了测试，并且出现了相同的行为。

// 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

您可以使用“ useRedirect”，如果我没弄错的话。您要在修改信息后进行重定向。

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;