UMI route interception (simple and rough)

One 、 Business scenario ：
Recently in use umi Development , Some pits were encountered when rendering navigation routes , For everyone to meet the same problem as me later , Let me share with you

Two 、 Solution ：
First add a high-level component , At the same level as all components , Add configuration where you want to configure the route wrappers: [‘@/wrappers/auth’], I'm afraid we don't understand , Here is a picture .

3、 ... and 、 Specific implementation steps
1、 stay src Under the directory of , and page At the same level , Create a new one wrappers Folder （ The name is fixed ）, Create a new Auth.tsx file ,

2、 Write the following contents in the file ：

import {Redirect} from 'umi'
export default function Auth(props:any) {
// Get local cache  localStorage Value 
  const isLogin = localStorage.getItem('role')
// If this value exists, it will return to the normal content 
  if(isLogin){
    return (
      <div>
        {props.children}
      </div>
    );
  }else {
  // If this value exists, redirect to the login page 
    console.log(' Skip login ')
      return (  <Redirect to='/login' />)
  }
}

3、 Add wrappers: [‘@/wrappers/auth’], What needs to be intercepted must be added , Pictured

Four 、 Effect display

This is the end of today's sharing , Welcome friends to communicate together