import React from 'react' ; import { useSelector } from '@/store' ; import { Switch , Route , Redirect , useLocation } from 'react-router-dom' ; import { notification } from 'antd' ; import AppConfig from '@/config/index' ; import Utils from '@/lin/utils/util' ; import { isLoginRequired } from './login-required' ; import { TransitionGroup , CSSTransition } from 'react-transition-group' ; import { IHomeRouterItem } from './home-router' ; const { defaultRoute } = AppConfig ; let timer ; interface RoutesProps { routes : IHomeRouterItem [ ] ; authPath ? : string ; extraProps ? : object ; switchProps ? : object ; } interface RenderRoutesProps extends RoutesProps { location : any ; } export default function Routes ( props ) { const location = useLocation ( ) ; return ( < TransitionGroup > < CSSTransition timeout = { 500 } classNames = { 'fade' } key = { location . pathname } > < RenderRoutes { ... props } location = { location } / > < /CSSTransition> < /TransitionGroup>); } function RenderRoutes ( { routes , authPath = '/login' , extraProps = { } , switchProps = { } , location , } ) { const logined = useSelector ( state => state . app . logined ) ; const permissions = useSelector ( state => state . app . permissions ) ; const user = useSelector ( state => state . app . user ) ; return ( < Switch r - if = { routes } location = { location } { ... switchProps } > < Redirect exact from = '/' to = { defaultRoute } / > { routes . map ( ( route , index ) => route . path && route . name && ( < Route key = { index } path = { route . path } render = { props => { if ( ! route . name ) return ; if ( isLoginRequired ( route . name ) && ! logined ) { return ( < Redirect to = { { pathname : authPath , state : { from : props . location } } } />); } if ( route . path !== defaultRoute && ! Utils . hasPermission ( permissions , route . meta , user ) ) { if ( ! timer ) { timer = window . setTimeout ( ( ) => { notification . error ( { message : '无权限' , description : ( < strong className = 'my-notify' > 您无此页面的权限哟 < /strong>) } ) ; } , 0 ) ; } window . setTimeout ( ( ) => { timer && clearTimeout ( timer ) ; timer = null ; } , 10 ) ; return ( < Redirect to = { { pathname : defaultRoute , state : { from : props . location } } } />); } if ( logined || route . path === authPath ) { if ( route . meta . title ) { document . title = route . meta . title ; } return ( < div className = 'animated-base' > < route . component { ... props } { ... extraProps } /> < /div>); } return ( < Redirect to = { { pathname : authPath , state : { from : props . location } } } />); } } />))} < Redirect to = '/404' / > < /Switch>); }