umi 约定式路由（基于React）

要想在 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>
         </>
     );
 }