Keystone 6 保存/更新操作后如何实现页面重定向？

你遇到的问题核心在于：afterOperation是Keystone的服务器端钩子，而useNavigate是React客户端专属的路由钩子，二者运行环境完全不同，直接在服务器钩子中调用useNavigate必然失败。下面是两种可行的实现方式：

方案一：自定义管理端创建/编辑页面（客户端处理） #

通过自定义Keystone管理界面的Create/Edit页面组件，在客户端监听表单提交状态，成功后执行跳转：

1. 编写自定义页面组件

import { useForm, useNavigate } from '@keystone-6/core/admin-ui';
import { CreatePage } from '@keystone-6/core/admin-ui/components';
import React from 'react';

export const CustomDocCreatePage = () => {
  const navigate = useNavigate();
  const { formState } = useForm();

  // 监听表单提交完成状态
  React.useEffect(() => {
    if (formState.status === 'submitted') {
      navigate('/docview');
    }
  }, [formState.status, navigate]);

  return <CreatePage />;
};

2. 在Keystone配置中替换默认页面

export default config({
  ui: {
    pages: {
      // 替换对应列表的创建页面，假设你的列表名为'doc'
      doc: {
        create: CustomDocCreatePage,
        // 如果需要更新后也跳转，同理自定义EditPage
        // edit: CustomDocEditPage
      },
    },
  },
  // 你的其他配置...
});

方案二：服务器钩子标记+客户端全局监听 #

通过服务器钩子在session中设置跳转标记，客户端全局监听session变化后执行跳转：

1. 服务器端钩子设置跳转标记

hooks: {
  afterOperation: async ({ operation, context }) => {
    if (operation === 'create' || operation === 'update') {
      // 在session中存入跳转目标
      await context.session.set({ redirectTo: '/docview' });
    }
  },
},

2. 客户端全局监听并处理跳转

import { useSession, useSessionContext } from '@keystone-6/core/admin-ui';
import { useNavigate } from 'react-router-dom';
import React from 'react';

export const AppWrapper = ({ children }) => {
  const { data: session } = useSession();
  const { setSession } = useSessionContext();
  const navigate = useNavigate();

  React.useEffect(() => {
    if (session?.redirectTo) {
      navigate(session.redirectTo);
      // 跳转后清空标记，避免重复触发
      setSession({ ...session, redirectTo: null });
    }
  }, [session, navigate, setSession]);

  return children;
};

3. 在Keystone配置中注册全局Wrapper

export default config({
  ui: {
    components: {
      AppWrapper,
    },
  },
  // 你的其他配置...
});

内容的提问来源于stack exchange，提问作者Gogo Bubbles