【无标题】

方式: 在外部包一层

利用PermissionControls组件，在这个组件内部进行权限判断处理

	<Route component={Acom}>  
	
	<Route component={(props) => {
						<PermissionControls render={Acom}  {...props}> </PermissionControls>
					}
				}>  

permissionControls组件

	import { useState } from "react"
	function permissionControls() { 
		const [isHasPermission,  setIsHasPermission] = useState(false)
		getPermission() {
			//setIsHasPermission 判断赋值
		}
		return (
			isHasPermission ? 
				<props.render location={props.location}></props.render>
				 : '无权限'
		)
  }
	 

踩坑点

 1. 因为非路由组件， props.location数据不存在， 在用permisssionControls包裹后， 之前的路由组件就不在是路由直接挂载的组件，此时 变为PermissionControls的子组件；
 **所以在权限控制组件的return里， 子组件一定要手动： location = {props.location} 传入**
 2. 动态组件的引入 函数 一定要写传参：  props， 并在 <PermissionControls  {...props}>  传入， 否则在permissionControls组件也获取不到 路由数据