我们知道前端路由分为History路由和Hash路由，时至今日随着前后端分离的广泛普及，已经没有什么理由再使用Hash路由了，因此后文都会以History路由为例进行介绍。UmiJS内部集成了react-router实现路由功能，我们可以在配置文件中通过指定路径匹配模式和指向的组件配置整个前端应用的路由。这篇笔记我们学习UmiJS中路由的配置和使用。
注：Umi4集成了react-router@6。
UmiJS的路由配置是写在config/config.ts中的，不过在实际开发中，路由是业务代码相关的配置，将其和构建打包之类的配置写在一起不太合适，我们都习惯将路由配置单独拆出来作为一个配置文件。
config.ts
import {defineConfig} from "umi";
import routes from './routes';
export default defineConfig({
routes,
});
routes.ts
export default [
{ path: "/", component: "index" },
{ path: "/docs", component: "docs" },
];
路由配置主要包含如下几个字段：
最常用的例如如下配置，我们指定访问/路径时，跳转到src/pages/index.tsx页面。
export default [
{ path: "/", component: "@/pages/index" },
];
其中components字段我们完整的指定了@/pages/index路径，这里其实不写@/pages/也是可以的，因为components默认的查找路径就是src/pages，但不建议这么做。
path还支持路径参数和通配符，比如冒号:用于指定路径参数，指定的参数可以使用useParams()获取。获取路径参数的具体代码在后文介绍。
*则用于指定路径通配符，它可以用来实现当没有任何路由匹配时返回404页面。
export default [
{ path: "/student/:id", component: "@/pages/student" },
{path: "/*", component: "@/pages/not-found"},
];
最基础的页面跳转就是使用<a>标签和设置浏览器的window.location了，但React中使用这两种方式（在History路由模式下）会让浏览器重新向服务端发起请求，体验不是很好，因此前端工程内的跳转一般使用路由组件专门提供的方法。
最简单的跳转方式是使用<Link>组件，其中的to属性指定跳转的路径，<Link>组件在实际DOM中会被渲染为<a>标签。
import {Link} from "umi";
export default function HomePage() {
return (
<div>
<Link to="/docs">点我跳转</Link>
</div>
);
}
另一种方式是使用useNavigate()进行跳转，下面是一个例子。
import {useNavigate} from "umi";
export default function HomePage() {
const navigate = useNavigate();
return (
<div>
<button onClick={() => {
navigate("/docs");
}}>点我跳转
</button>
</div>
);
}
路由中可以传递查询参数、路径参数等，下面我们介绍如何获取路由信息。
UmiJS工程中，应该使用useLocation()而非window.location获取location信息，前者在后者基础上进行了一些封装，可以自动取项目base的相对路径。
import {useLocation} from "umi";
export default function HomePage() {
const {pathname, search} = useLocation();
return (
<div>
{pathname}
{search}
</div>
);
}
上面例子代码中，我们从location中取出了一些信息。
注意：代码中从umi中引用useLocation而非react-router，这是因为UmiJS框架统一对内部的所有组件做了封装，并统一以umi暴露出来方便我们使用。UmiJS集成的其它组件使用时也是类似的。
获取查询参数可以使用useSearchParams()。下面例子中，假设我们的查询参数是?id=1，代码中我们取出了参数id的值。
import {useSearchParams} from "umi";
export default function HomePage() {
const [params, setParams] = useSearchParams();
return (
<div>
{params.get("id")}
</div>
);
}
路径参数需要配合路由的:占位符配置使用，页面组件中可以使用useParams()获取路径参数，下面是一个例子。
export default [
{ path: "/student/:id", component: "@/pages/student" },
];
import React from "react";
import {useParams} from "umi";
const Student: React.FC = () => {
const {id} = useParams();
return (<div>{id}</div>);
};
export default Student;