浅谈umi router

前言

最近学习UmiJS，在umi-router上踩了许多坑，现记录下所学。

基础路由

假设 pages 目录结构如下：

+ pages/
  + users/
    - index.js
    - list.js
  - index.js

那么，umi 会自动生成路由配置如下：

[
  { path: '/', component: './pages/index.js' },
  { path: '/users/', component: './pages/users/index.js' },
  { path: '/users/list', component: './pages/users/list.js' },
]

也就是说，不用创建类似router.js做路由管理，umi会根据你文件的层级自动创建相应路由

ps：
关于动态路由，可以看我写的这篇笔记

layout

umi约定，通过 src/layouts/index.js 文件来作为全局路由

实际上就是在你的路由外面嵌套了一层。

目录下有 _layout.js 时会生成嵌套路由，以 _layout.js 为该目录的 layout 。

比如以下目录结构：

+ pages/
  + users/
    - _layout.js
    - id.js
    - index.js

会生成路由配置如下：

[
  { path: '/users': component: './pages/users/_layout.js'
    routes: [
     { path: '/users/', component: './pages/users/index.js' },
     { path: '/users/id', component: './pages/users/id.js' },
   ],
  },
]

约定 src/layouts/index.js 为全局路由，返回一个 React 组件，通过 props.children 渲染子组件。

比如：

export default  class App extends PureComponent {
	render(){
	  const {children} = this.porps;
	  return (
	      { children }
	  );
	}
}

有的同学卡在这里，只需要打印一下children就知道了。