前言

在学习和使用框架时，路由部分常常是十分关键的模块。虽然仔细阅读文档可能有些枯燥，但我仍然建议你认真研读关于路由的内容。路由作为框架的核心组件之一，起着至关重要的作用。深入理解路由机制，不仅能帮助你更高效地开发应用，还能让你在处理复杂场景时更加得心应手，提高代码的可维护性和灵活性。因此，花时间掌握这一部分知识是非常值得的投入。

你需要关注以下几点

1. 自动路由生成 本框架使用 Elegant Router  自动生成路由。

   • 在项目中，你无需手动编写冗长的路由配置文件，只要遵循特定的文件及文件夹命名规则即可完成路由创建。
   • 如果需要查看更详细的配置或支持更高级的用法（例如忽略某些文件夹、动态加载等），可以参阅 Elegant Router 的官方文档。

2. 路由鉴权

   • 路由鉴权采用声明式的鉴权方式，在根级的 layout.tsx 中统一进行处理。
   • 当用户访问任意页面时，会先经过 layout.tsx 中的逻辑判断，从而决定跳转或拦截。
   • 要查看具体的实现细节，请阅读项目中的 src/pages/layout.tsx 文件。你会发现系统会根据你的登录状态、用户角色等进行判断，从而决定跳转到目标页面或跳转至登录页/错误页。

3. 两个关键 Hook

   • useRoute：可用于获取当前路由的详细信息。例如，你可以在页面组件中调用它来获取当前 URL 的路径参数、查询参数、路由数据（loader 返回值）、layout 中自定义的 handle 信息等。
   • useRouter：则用于路由跳转与导航控制。通过它，你可以方便地执行前进、后退、替换路由、查询参数拼接等操作，简化对 react-router 原生 API 的重复调用。

推荐的学习路径

1. 掌握自动路由生成规则

   • 了解如何在 src/pages 中创建或重命名文件夹与文件，从而让框架自动生成对应的路由。
   • 熟悉常见的约定：如 index.tsx 表示页面级组件，layout.tsx 表示布局级组件，[id].tsx 表示动态路由等等。

2. 查看鉴权逻辑

   • 打开 src/pages/layout.tsx，读懂鉴权逻辑如何运行，以及用户在访问受限路由时的处理流程。
   • 如果需要自定义更多鉴权需求（例如根据不同角色跳转到不同页面），可在此文件进行拓展。

3. 了解 Hook 的使用

   • 在任意页面中，通过 useRoute 获取当前路由的各种上下文信息，如错误状态、路由参数、查询参数等。
   • 通过 useRouter 获取导航方法，实现更灵活的页面跳转、替换、回退等功能。

通过以上几个方面的学习，你会对框架中的路由系统有一个系统且完整的认知，并能运用到实际开发中。祝你在后续的项目开发中一切顺利，编写出更高效、更优雅的代码！