灵感：React实现按钮权限控制

以下是一个示例代码片段，演示如何根据 props.auth 属性与路由数据按钮列表来条件性地渲染 Button 组件：

一、创建一个AuthButton公共组件

import {useRouterLoaderData} from "react-router-dom"
/**
* @function AuthButton 
* @params   props 获取按钮设置属性；如：onClick、type='danger'；
            其中，如果该按钮需要设置权限，则需要添加属性
           【auth='该按钮的权限标识<此标识具有唯一性，整个项目都不能重复命名>'】
* @params   buttonListName 设置数据路由器按钮列表属性名称，【非必填，默认为buttonList】
* @params   routeUrl 设置数据路由器的名称，【非必填，默认为layout】
* @desc     根据条件，生成权限按钮
**/
export default funtion AuthButton（props,buttonListName='buttonList'，routeUrl='layout'）{
    // 1、获取数据路由数据
    const data = useRouteLoaderData（routeUrl）
    // 2、判断：如果没有 props.auth 属性，则创建一个 Button 组件
    if(!props.auth){
        return {props.children}
    }
    // 3、判断：如果该角色的按钮标识列表，包含该按钮权限，则创建一个 Button 组件
    if(data[buttonListName].includes(props.auth)){
        return {props.children}
    }
    return <>    
}

在上面的代码中，

如果传递给AuthButton组件的 props 中包含 auth 属性或者按钮标识列表包含传入的标识码，则它会渲染 Button 组件，并将 props 传递给 Button 组件进行渲染。

如果 props 中不包含 auth 属性并且列表也不包含标识码，则不生成按钮组件。

二、调用

三、参考链接：

1、useRouteLoaderData

React Router v6.6.1 中文手册__symbol_colon__useRouteLoaderData - 桑鸟网