如何在Admin on rest中通过自定义组件实现带筛选的路径/资源切换？

嘿，我来帮你搞定这个自定义元素的实现！在Admin on Rest（现在已经演进为React Admin，但核心逻辑相通）里，要实现点击跳转带筛选的路径或者切换Resource并携带筛选条件，咱们可以利用框架提供的路由工具和状态上下文来完成，具体方案如下：

首先要用到几个关键工具：

• useHistory（或旧版的withRouter）：用来控制路由跳转
• useResourceContext：获取当前上下文里的Resource名称（如果需要基于当前资源跳转的话）
• stringify：React Admin提供的工具，用来把筛选对象序列化为URL能识别的编码字符串

这个场景适合你想在当前资源页面内，点击元素跳转到同资源的列表页并自动应用筛选的情况。

import React from 'react';
import { useHistory, useResourceContext, stringify } from 'react-admin';
// 旧版Admin on Rest请替换为：import { useHistory, useResourceContext, stringify } from 'admin-on-rest';

const CustomJumpButton = ({ filter }) => {
  const history = useHistory();
  const currentResource = useResourceContext(); // 获取当前页面所属的Resource

  const handleJump = () => {
    // 把筛选对象序列化为URL参数
    const encodedFilter = stringify({ filter });
    // 构造目标路径：/当前资源名?filter=编码后的筛选内容
    const targetPath = `/${currentResource}?${encodedFilter}`;
    // 触发跳转
    history.push(targetPath);
  };

  return (
    <button onClick={handleJump} style={{ padding: '8px 16px', cursor: 'pointer' }}>
      跳转当前资源（带筛选）
    </button>
  );
};

export default CustomJumpButton;

使用时，你只需要在Resource页面内引入这个组件，传入筛选对象即可：

// 比如在UserList页面里
<CustomJumpButton filter={{ status: 'active', role: 'admin' }} />

如果需要跳转到其他Resource的列表页并应用筛选，那可以用这个方案，不需要依赖当前资源上下文：

import React from 'react';
import { useHistory, stringify } from 'react-admin';

const CustomSwitchResourceButton = ({ targetResource, filter }) => {
  const history = useHistory();

  const handleSwitch = () => {
    const encodedFilter = stringify({ filter });
    const targetPath = `/${targetResource}?${encodedFilter}`;
    history.push(targetPath);
  };

  return (
    <button onClick={handleSwitch} style={{ padding: '8px 16px', cursor: 'pointer', marginLeft: '8px' }}>
      切换到{targetResource}（带筛选）
    </button>
  );
};

export default CustomSwitchResourceButton;

使用示例：

// 比如在任意页面，点击跳转到Posts资源并筛选已发布的内容
<CustomSwitchResourceButton 
  targetResource="posts" 
  filter={{ status: 'published', category: 'tech' }} 
/>

• 如果你的自定义元素不在Resource上下文里（比如全局导航栏），useResourceContext会返回undefined，这时候场景1的组件需要手动传入resource属性：

  <CustomJumpButton resource="users" filter={{ role: 'admin' }} />
  

• 旧版Admin on Rest没有useHistory钩子，需要用withRouter高阶组件包裹组件来获取路由对象：

  import { withRouter } from 'react-router-dom';
  
  const CustomJumpButton = ({ history, resource, filter }) => {
    // 逻辑和之前一致，只是history从props获取
  };
  
  export default withRouter(CustomJumpButton);
  

• React Admin/Admin on Rest的List组件会自动解析URL中的filter参数，并自动应用到数据查询上，所以你不需要额外处理筛选的生效逻辑，框架会帮你完成。

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