umi3 嵌套路由的使用

虽然是这么说：
如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析 src/pages 目录拿到路由配置。

但是感觉umi的约定式路由对复杂点的路径和嵌套路由都不怎么友好。对于嵌套路由还得按着要求建_layout，觉得是增加了学习成本。
于是还是得配置下routes:
和vue-router不同，umi(react)的路由用起来很别扭，怕忘记了因此记下来。

项目结构
├─charts
│ └─pages
│ ├─chart
│ └─data
│ └─components
│ ├─ChartTypeSelect
│ ├─DimensionSelect
│ └─HotTable
└─test

首先，不按约定路由格式建立项目结构的话，就必须使用.umirc.js内的routes属性定义路由需要指定引用的组件

routes: [
 {
     path: '/',
     component: '@/pages/index',
     routes: [
         { path: '/test', component: '@/pages/test/index' },
         {
             path: '/charts/',
             component: '@/pages/charts/index',
             routes:
             [
                 { path: '/charts/data', component: '@/pages/charts/pages/data/index' },
             ],
        },
     ],
  },
],

@/pages/index:
需要再次指定引用的组件

//router

import {
 Route,
 Switch,
} from 'react-router-dom';
//pages
import ChartsMain from './charts/index.jsx';
import TestMain from './test/index.jsx';

render

{/*...前略*/}
 <Content style={{ margin: 0, overflow: 'initial' }}>
     <Switch>
         <Route path="/" component={ChartsMain} exact />
         <Route path="/charts" component={ChartsMain} />
         <Route path="/test" component={TestMain} />
     </Switch>
 </Content>
 {/*后略...*/}

二级嵌套（@/pages/charts/index.jsx）
render:

<Content>
     <Switch>
         <Route path="/" component={dataPage} exact />
         <Route path="/charts" component={dataPage} exact />
         <Route path="/charts/data" component={dataPage} exact />
         <Route path="/charts/chart" component={chartPage} />
     </Switch>
 </Content>

就实现了在组件内使用嵌套路由，动态渲染局部内容

1、如果需要用到 this.history 主动操作路由时，还需要使用
react-router-dom 的 withRouter
使用:

import {withRouter} from 'react-router-dom';
//...
export default withRouter(IndexLayout);

2、如果使用react-router-dom Switch 可以减少多余的渲染
参考:react-router中Switch路由组件的作用

papermoon

umi3 嵌套路由的使用