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'



/** 获取全部路由的路径 */
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 (
        <Switch>
            <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)