react 中子路由（route）或二级路由如何配置？

比如有A框架，\B\C\D（如下图）三个模块，如下图，整体页面我们叫A，A左侧菜单有个菜单是跳到B（除了左侧蓝色的导航之外整个右边我们叫B）、而B目录下又有C或者D（就是右边第三个模块）内容区，如何来写route：

首先要配置主路由，该引入的东西引入一下（我用了懒加载）：

import { HashRouter, Switch, Route, Redirect } from 'react-router-dom'

// 懒加载过渡

function ImportCmpLoading() {

return <></>

}

 

// 用于组件懒加载

function lazyImport(cmp) {

return Loadable({ loader: () => cmp, loading: ImportCmpLoading })

}

下面是主路由（首页这个就不用说了），我跳到B页面，B（其实匹配的是B文件夹下的index）在pages文件夹下：

特别注意的是：如果有二级路由，就要把exact删掉了，不然无法匹配到B下面的c、d。

function router() {
  return (
    <HashRouter>
      <Layout className={styles['content-wrap']}>
        {/* 侧边栏 */}
        <Layout.Sider className={styles.nav} width={56}>
          <NavList />
        </Layout.Sider>
        {/* 右边内容区 */}
        <Layout.Content>
          <Switch>
            {/* 首页 */}
            <Route exact path='/' component={lazyImport(import('@/pages/home'))}/>
            {/* B页面 */}
            <Route path='/B' component={lazyImport(import('@/pages/B'))}/>
           
          </Switch>
        </Layout.Content>
      </Layout>
    </HashRouter>
  )
}

ok，然后B下面有C或者D，怎么跳呢？下面是B中的布局，看看怎么写：

function B(props) {
  return (
    <MLayout>
      {/* 左边栏 */}
      <MLayout.Sider>
        {/* 上部 */}
        <MLayout.Sider.SiderTop>
          <div className={classnames(styles.configTopName)}><img src={configTopIc} alt='img'/> B页面</div>
        </MLayout.Sider.SiderTop>
        {/* 下部 */}
        <MLayout.Sider.SiderBot>
          {/* 左边菜单  */}
          <div className={classnames(styles.configLeftMenu)}>
            {/* 这里是B页面的需要跳到C、D的菜单的位置：*/}
           <Link to='/B/C'>TO C</Link>
           <Link to='/B/D'>TO D</Link>
        </MLayout.Sider.SiderBot>
      </MLayout.Sider>
      {/* 右边内容区 */}
      <Layout.Content>
        {/* 配置页面右侧内容C、D */}
        {/* 第一条：为了从A跳到B默认显示C */}
        <Route exact path='/B/' component={lazyImport(import('@/pages/B/C'))}/>
        <Route path='/B/C' component={lazyImport(import('@/pages/B/C'))}/>
        <Route path='/B/D' component={lazyImport(import('@/pages/B/D'))}/>
      </Layout.Content>

    </MLayout>

  )
}