Remix 学习 - 文件系统路由和动态路由

在 Remix 中，路由系统基于文件结构，提供了简单直观的方式来管理路由。

文件系统路由

1. 基本概念：

   • 文件系统路由通过在 app/routes 目录中创建文件和文件夹来定义。
   • 每个文件或文件夹对应一个路由路径。

2. 示例：

   • app/routes/index.jsx 对应 / 路径。
   • app/routes/about.jsx 对应 /about 路径。
   • 可以通过嵌套文件夹来创建嵌套路由，例如：
     • app/routes/blog/index.jsx 对应 /blog。
     • app/routes/blog/post.jsx 对应 /blog/post。

动态路由

1. 基本概念：

   • 动态路由允许在 URL 中使用动态参数。
   • 通过在文件名中使用 $ 前缀来定义动态部分。

2. 示例：

   • app/routes/users/$userId.jsx 对应 /users/:userId。
   • 在组件中，可以通过 useParams 钩子访问动态参数：

   import { useParams } from "@remix-run/react";
   
   export default function User() {
     let { userId } = useParams();
     return <h1>User ID: {userId}</h1>;
   }
   

Remix 的文件系统路由使得路由管理更简单直观，动态路由则提供了灵活性来处理动态内容。