react 路由 无法展示

Question

获取后台传过来的路由结构，进行循环遍历路由

路由结构如下：

版本号：

"react": "^16.9.0",
"react-app-polyfill": "^1.0.2",
"react-dev-utils": "^9.0.3",
"react-dom": "^16.9.0",
"react-loadable": "^5.5.0",
"react-router-dom": "^5.0.1",

app.js文件

import React from 'react';
import {
    BrowserRouter as Router, 
    Route, 
    Switch,
    Redirect,
} from 'react-router-dom';
import Layout from '@/component/layout'
import RouterList, { 
    WhiteRouterMap 
} from '@/router/index.js'

const GetRouterMap = (routerList) => {
    return routerList.map((item,index) => {
        if (item['children']){
           return (<Route key={index} path={item.path} component={item.component}>
                {
                    GetRouterMap(item['children'])
                }
            </Route>)
        } else {
           return (<Route key={index} path={item.path} component={item.component} />)
        }
    })
}

const BasicRoute = () => (
    <Router>
        <Switch>
            {
                WhiteRouterMap.map((item,index) => <Route key={index} path={item.path} component={item.component}></Route>)
            }
            <Route path="/" render={({history,location,match}) => (
                <Layout history={history} location={location} match={match}>
                    {
                        GetRouterMap(RouterList)
                    }
                </Layout>
            )} />
        </Switch>
    </Router>
)

export default BasicRoute;

**问题：

我的首页详情页能出来，首页出不来。如果给其他的模块也添加详情页，对应的父级页面也出不来。该怎么修改这个代码呢？？？**