要想在 umi 项目中使用约定式路由,直接将 .umirc.ts 文件中的 routes 属性删掉就可以了。
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
fastRefresh: {},
});
一、创建一级路由文件
我们在 pages 中分别创建 home、login 和 register 三个页面文件:
pages
|---find
| |---index.jsx
|---my
| |---index.jsx
|---friend
| |---index.jsx
创建完成后,Umi 会自动根据我们 pages 中的文件名和文件路径解析路由,就不需要再额外配置路由了。
我们在浏览器中通过访问以下路径就能看到登录、注册和首页三个页面:
http://localhost:8000/find
http://localhost:8000/my
http://localhost:8000/friend
因为组件名是 index.jsx,所以我们在访问路由时可以省略组件名不写。
如果页面目录中的组件文件名不是 index.jsx,浏览器在访问时路径中就需要加上文件名。例如 http://localhost:8000/find/find。
二、创建二级路由文件
Umi 里约定目录下有 _layout.jsx 时会生成嵌套路由,以 _layout.jsx 为该目录的 layout。layout 文件需要返回一个 React 组件,并通过 props.children 渲染子组件。
例如我们想在首页中再新增两个子组件:推荐和排行榜。
pages
|---find
|---_layout.jsx
|---discover
|---index.jsx
|---topList
|---index.jsx
会生成路由:
[
{
path: '/find', component: '@/pages/find/_layout',
routes: [
{ path: '/find/discover', component: '@/pages/find/discover' },
{ path: '/find/topList', component: '@/pages/find/topList' },
]
}
]
如果保留 find 目录中的 index.jsx,那么生成的路由配置如下:
[
{
path: '/find', component: '@/pages/find/_layout',
routes: [
{ path: '/find', component: '@/pages/find/index.jsx' },
{ path: '/find/discover', component: '@/pages/find/discover' },
{ path: '/find/topList', component: '@/pages/find/topList' },
]
}
]
三、创建全局根路由
如果我们希望“发现音乐”、“我的音乐”和“关注”三个页面有相同的头部和底部,那么我们就需要给这三个组件配置一个根组件,将相同的头部和底部设置在根组件中,然后不同的部分通过路由来进行切换。
但是 Umi 项目中默认是没有根组件的,因此,我们需要为约定式创建一个全局的根路由组件,来实现这三个组件的切换。
我们在 src 目录中创建一个 layouts 目录,并在该目录中创建一个 index.jsx 文件。
import React from 'react';
import { Link } from 'umi'
export default function Layout(props) {
return (
<>
<ul>
<li><Link to="/find/discover">推荐</Link></li>
<li><Link to="/find/topList">排行榜</Link></li>
<li><Link to="/find/playList">歌单</Link></li>
</ul>
<div>{props.children}</div>
</>
);
}