以下是一个示例代码片段，演示如何根据 props.auth 属性与路由数据按钮列表来条件性地渲染 Button 组件：
一、创建一个AuthButton公共组件
import {useRouterLoaderData} from "react-router-dom"
/**
* @function AuthButton
* @params props <any>获取按钮设置属性；如：onClick、type='danger'；
其中，如果该按钮需要设置权限，则需要添加属性<auth>
【auth='该按钮的权限标识<此标识具有唯一性，整个项目都不能重复命名>'】
* @params buttonListName <string>设置数据路由器按钮列表属性名称，【非必填，默认为buttonList】
* @params routeUrl <string>设置数据路由器的名称，【非必填，默认为layout】
* @desc 根据条件，生成权限按钮
**/
export default funtion AuthButton（props,buttonListName='buttonList'，routeUrl='layout'）{
// 1、获取数据路由数据
const data = useRouteLoaderData（routeUrl）
// 2、判断：如果没有 props.auth 属性，则创建一个 Button 组件
if(!props.auth){
return <Button {...props}>{props.children}</Button>
}
// 3、判断：如果该角色的按钮标识列表，包含该按钮权限，则创建一个 Button 组件
if(data[buttonListName].includes(props.auth)){
return <Button {...props}>{props.children}</Button>
}
return <></>
}在上面的代码中，
如果传递给AuthButton组件的 props 中包含 auth 属性或者按钮标识列表包含传入的标识码，则它会渲染 Button 组件，并将 props 传递给 Button 组件进行渲染。
如果 props 中不包含 auth 属性并且列表也不包含标识码，则不生成按钮组件。
二、调用
<AuthButton auth='user@Edit' type='danger' className='button'></AuthButton>三、参考链接：
1、useRouteLoaderData
React Router v6.6.1 中文手册__symbol_colon__useRouteLoaderData - 桑鸟网
