router-view.js

import React, { useState, useEffect } from 'react'
import Layout from '@/components/Layout'
import { Switch, Route } from 'react-router-dom'
import { APP } from '@/config'
import connect from '../store/modules/route/connect'
import { getAllRouter } from '../libs/utilts'
import fullScreenRoute from './modules/fullScreenRoute'

/** 获取全部路由的路径 */
const getAllRouterName = route => route.map(e => e.url)

const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSatatus }) => {
    const [openRoute, setOpenRoute] = useState([])

    useEffect(() => {
        // 二级路由转一级路由
        const allRoute = getAllRouter(userRoute)
        const allName = getAllRouterName(serviceRoute)

        const newRoutes = allRoute.map(e => {
            const index = serviceRoute.findIndex(service => service.url === e.url)
            const newE = {...e}

            if (index !== -1)
                newE.component = serviceRoute[index].component
            else {
                const indexOfName = allName.findIndex(url => url === e.url)
                if (indexOfName !== -1)
                    newE.component = serviceRoute[index].component
                else 
                    newE.component = () => {
                        // location.href = APP.othreDomain + newE.url
                        return (<>{newE.url}</>)
                    }  
            }
                
            return newE
        })

        setOpenRoute(newRoutes)

    }, [userRoute, serviceRoute])

    return (
        <>  
            {
                !userSatatus?(
                    <Switch>
                        {  
                            fullScreenRoute.map(val => <Route key={val.url} path={val.url} exact={val.exact} component={val.component} />)
                        }
                    </Switch>
                ):(
                    <Switch>
                        {/* <Route path="/login" component={Login}></Route> */}
                        <Layout>
                            {basisRoute.map(e => <Route path={e.url} exact={e.exact} component={e.component} key={e.url} />)}
                            {openRoute.map(e => <Route path={e.url} exact={e.exact} component={e.component} key={e.url} />)}
                        </Layout>
                    </Switch>
                )
            }
        </>
    )
}

export default connect(RouterView)