项目路由表改造设计方案

页面路由采用路由表生成

封装路由主要是为了解决以下问题

1.统一封装处理url参数，如appid,token,分享设置等
2.路由统一管理减少冗余代码

路由对象设计

需要改造的就是所有子模块的路由进行汇总

父路由设计(保留之前)

   import StudentRoutes from './StudentManagement/router'
    
    {
        name: 'StudentManagement',
        path: '/user-center/student-management',
        remoteUrl: '/user-center/student-management',
        authRequired: true,
        component: StudentRoutes
    }

子路由设计(重构)

  import  RouterContainer from '@share/RouterContainer'

  let routeList =  [{
    name: 'StudentRoutes',
    title:'学生管理'
    path: '/user-center/student-management',
    remoteUrl: '/user-center/student-management',
    authRequired: true,
    component: StudentRoutes
   }]
   
    const CenterRoutes = ()=>{
        return (
                <>
                   return routeList.map( (route)=>{
                      return < RouterContainer {...route} />
                   })
                <>
            )
   }
   
   export default CenterRoutes;
   

RouterContainer组件

• 统一处理token,分享等

 const RouteContainer = props => {
 
 const { component: Component,path, title,...rest } = props;
        
 const ComponentRender = (props)=> {
    useDocumentTitle(title);
    const query = qs.parse(props.location?.search 
    const queryAppid = query?.appid;
    const token  = query?.token;

    //处理分享逻辑
    const sharePage =  ['/home','/userCenter']
    useEffect(() => {
       if( sharePage.indexOf(props.location.path)){
           //todo
       }
    })
  
    useEffect(() => {
        if (!appid && queryAppid) {
          setAppid(queryAppid);
        }
    }, [queryAppid, appid]);
    return <component  {...rest} />
 }

  return ( 
    <Route
        path="{path}"
        exact
        render={ComponentRrender}
    >
  )    

};