remix 路由分类

    1. 根路由 root.tsx
    2. 页面路由（基础路由）routes
    3. 带有参数页面路由（动态路由）
    4. 可选分段路由 （处理不同分段）
    5. 布局路由（非页面路由，处理布局，与 Outlet 组件结合）
    6. 点分割路由（简化文件夹深度）
    7. Splat 路由（特定匹配）
    8. 路由转义字符串

    路由约定，使用 .点路由分割符号的方式，不再支持文件夹嵌套的模式

    • index 文件路由改为 _index 路由
    • 布局路由使用 _ 下划线开始
    • ~ 波浪线代表 app 目录
    • react-router API 全部从 @remix-run/react 获取
    • loader 不能访问 window 属性，不能有 jsx ```tsx import { useLocation, useLoaderData, Link } from “@remix-run/react”;

    export async function loader({ params }) { return await getUsers(); }

    export default function Page() { const data = useLoaderData(); }

    2. ![image.png](https://cdn.nlark.com/yuque/0/2024/png/112859/1705137251290-8492cd94-9288-4ed2-bdc3-47cea3bc931c.png#averageHue=%236c837f&clientId=u53eb9e60-1f33-4&from=paste&height=251&id=uc82f6914&originHeight=552&originWidth=1312&originalType=binary&ratio=2.200000047683716&rotation=0&showTitle=false&size=430909&status=done&style=none&taskId=uf1a59a02-9b53-4530-9172-45c27116a6b&title=&width=596.363623437803)
    4. <a name="U2OI0"></a>
    5. ## 前后端一体化
    6. 前端后端的代码都可以写在一个文件中，逻辑更加内聚
    8. - loader、action 会运行在 Server 上
    9. - meta、links 会运行在浏览器上
    10. - export default 导出的组件在浏览器和 Server 上都会运行 SSR
    12. ![image.png](https://cdn.nlark.com/yuque/0/2024/png/112859/1706879551263-145876b6-ffd2-4257-aca1-48f64cc9fca0.png#averageHue=%23151412&clientId=u7ac2ed71-f3e9-4&from=paste&height=391&id=u7cd9c452&originHeight=860&originWidth=1232&originalType=binary&ratio=2.200000047683716&rotation=0&showTitle=false&size=100300&status=done&style=none&taskId=u8139764b-f622-4bc1-8989-eace6935652&title=&width=559.9999878623271)
    13. ```tsx
    14. import type {
    15.   MetaFunction,
    16.   LinksFunction,
    17.   LoaderFunction
    18. } from '@remix-run/node'
    19. import stylesUrl from "~/styles/index.css";
    21. /**
    22.  * 每个页面组件中，直接声明 head 中的信息
    23.  * 可以获取 loader中的 data
    24.  */
    25. export const meta: MetaFunction = ({ data }) => {
    26.   return [
    27.     {
    28.       title: "Remix: It's funny!",
    29.       description: "Remix Remix Remix",
    30.     }
    31.   ];
    32. };
    34. /*
    35.  * 声明依赖的资源文件
    36.  * <link />
    37.  */
    38. export const links: LinksFunction = () => {
    39.   return [{ rel: "stylesheet", href: stylesUrl }];
    40. };
    42. /*
    43.  * Server 服务端代码，负责数据获取
    44.  * 执行 SQL，Redis的操作，组件使用 useLoaderData() 获取数据
    45.  */
    46. export const loader: LoaderFunction = async ({ request }) => {
    47.   const res = await db.getData(request);
    48.   return json(res);
    49. }
    51. /*
    52.  * 负责修改数据，data mutation
    53.  */
    54. export const action = async ({ request }) => {
    55.   const res = await db.setData(request);
    56.   return json(res);
    57. }
    59. // React 组件
    60. export default function IndexPage() {
    61.   const data = useLoaderData();
    63.   return (
    64.     <div>
    65.       React 组件
    66.     </div>
    67.   )
    68. }

    remix 路由
    https://juejin.cn/post/7199659141018337338