Umi4入门到进阶-第二篇：路由系统全解析

Umi4入门到进阶-第二篇：路由系统全解析

在Umi 4项目开发中，路由系统是决定用户如何在不同页面间进行切换和交互的核心模块。其强大且灵活的路由机制，包含约定式路由与配置式路由两种模式，能满足多样化的业务需求。本文将全面解析Umi 4的路由系统，从规则原理到实际应用，帮助开发者熟练运用路由功能构建优质的前端应用。

一、约定式路由深度探索

（一）src/pages目录结构驱动的路由生成规则

Umi 4的约定式路由以src/pages目录结构为基础，通过简单的文件和文件夹命名规则，自动生成对应的路由配置。在该目录下，每一个.js或.jsx文件都对应一个路由页面。例如，在src/pages目录下创建about.jsx文件：

import React from'react';

const About = () => {
  return (
    <div>
      <h1>关于我们</h1>
    </div>
  );
};

export default About;

当项目运行时，访问http://localhost:8000/about，即可展示About组件对应的页面内容。如果