1. 首页
  2. IT资讯

umi3 嵌套路由的使用

但是感觉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 可以减少多余的渲染

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203444.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code