Umi +React + dva + Ant Design Pro 的项目学习（四) Umi的路由实现

1.单页面

首先我们需要搞懂一个概念，就是Umi是一个单页面应用 ， 就是一个html页面，他不会进行跳转，你所看到的页面变换，只不过是在同一个页面上重新渲染了别的组件。所以Umi的路由路径关联的其实是一个个组件文件。
 

2.创建一个路由

进入Umi的配置文件 .umirc.ts，我们在routes增加我们需要创建的路由对象，并且绑定它所关联的组件路径。

这里的 “@/page/hello” 中的 "@"表示 src 目录。
你也可以用 “hello” 来代替 “@/page/hello”，"@/page/hello" 为绝对路径，“hello” 为相对路径，会从 src/pages 开始找起。

.umirc.ts

	routes: [
	    {path: '/', component: '@/pages/index'},
	    {path: '/hello', component: '@/pages/hello'},//绝对路径
	    {path: '/hello', component: 'hello'},//相对路径
  	],

 

3.填充页面组件

创建了路由和对应的页面组件，但是我们的hello.tsx还是空的，我们写一个简单的Hello World页面.
小提示：如果你是用IDEA的话，输入rsc或者rcc可以快速填充。（rsc为函数式组件，rcc为对象式组件，官推前者）

hello.tsx

import React from 'react';

const Hello = () => {
  return (
    <div>
      <h1>HelloWorld</h1>
    </div>
  );
};

export default Hello;

这时候我们就可以出入路由跳转到 “http://localhost:8000/hello” 页面进行查看。

恭喜，你已经成功学会如何配置一个路由了！
 

4.多重路由

然后我们简单弄个多重路由。
在路由中增加routes属性，里面是多个route嵌套而成的，有点套娃的感觉。

.umirc.ts

routes: [
    {path: '/', component: '@/pages/index'},
    {path: '/hello', component: '@/pages/hello'},
    {
      path: '/user',
      routes:[
        {path:'/user/add',component:'@/pages/user/add'},
        {path:'/user/edit',component:'@/pages/user/edit'}
      ]
    }
  ],

随便创建两个对象，这里路径是 “src/pages/user/…”，其中page中的内容就不放了，随便写点能辨识的内容就好。

效果图：
http://localhost:8000/user/add

http://localhost:8000/user/edit

5.页面模板

有时候我们的页面往往有一些公用的部分，例如sidebar，header，footer等类似的，这就需要我们进行页面的模板化。
首先我们在src目录下面创建一个layout存放页面模板。

在layouts目录下创建一个header.tsx对象，我们给之前的页面设计一个导航栏。（这里只是取名叫header，其实这是页面模板，一般一个layouts文件包含一个模板所有的排版和其中的组件）

这里的 {props.children} 就会把子路由下的组件全都引用到指定位置。

header.tsx

import React from 'react';

const Header = (props: any) => { // props:any是typescript的类型规范，如果你是jsx文件直接props就可以拿到
  return (
    <div>
      <h3>主页/用户/商品/个人中心</h3>
      {props.children}
    </div>
  );
};

export default Header;

然后我们在路由中把我们的模板加进去,也就是在 “/user/add” 和 “/user/edit” 的外面一层套了一个统一的 “component”。

.umirc.ts

  routes: [
    {path: '/', component: '@/pages/index'},
    {path: '/hello', component: '@/pages/hello'},
    {
      path: '/user',
      component:'@/layouts/header',
      routes:[
        {path:'/user/add',component:'@/pages/user/add'},
        {path:'/user/edit',component:'@/pages/user/edit'}
      ]
    }
  ],

效果图：


ok，下次我们来实现路由跳转。