umi路由篇

示例：

export default {
	routes: [
		{ exact: true, path: ‘/’, component: ‘index’ }
	]
}

path: 路径

type: string 

可以被path-to-regexp匹配的路径

component: 配置location和path匹配后，用于渲染的react组件路径。可以是绝对路径，也可以是相对路径

Type: string

exact: 是否严格匹配

Type: Boolean 

routes: 配置子路由

export default {
	routes: [
		{ path: '/login', component: 'login' },
		{
  			path: '/',
  			component: '@/layouts/index',
  			routes: [
    			{ path: '/list', component: 'list' },
    			{ path: '/admin', component: 'admin' },
 	 		],
		}, 
	],
}

redirect: 配置路由跳转

Type: string
export default {
      routes: [
		{ exact: true, path: '/', redirect: '/list' },
		{ exact: true, path: '/list', component: 'list' },
      ],
}

title: 配置路由标题

Type: string

页面跳转：

import { history } from 'umi';

// 跳转到指定路由
history.push('/list');

// 带参数跳转到指定路由
history.push('/list?a=b');
history.push({
      pathname: '/list',
      query: {
          a: 'b',
      },
});

// 跳转到上一个路由
history.goBack();

Link组件：Link只能用于单页面应用的内部跳转，如果是外部的地址使用a标签

import { Link } from 'umi';
export default () => (
	<div>
		<Link to="/users">Users Page</Link>
	</div>
);

路由组件参数：

match，当前路由和 url match 后的对象，包含 params、path、url 和 isExact 属性
location，表示应用当前出于哪个位置，包含 pathname、search、query 等属性
history，同 api#history 接口
route，当前路由配置，包含 path、exact、component、routes 等
routes，全部路由信息