在这个快速入门中，我们将简短的介绍api单词和一些示例代码，这就是你想在15分钟内学习的Remix全部的内容。

环境准备

  • node.js 14 或 更高
  • npm 7 或 更高
  • 一个代码编辑器

创建项目

初始化一个新的Remix项目

  1. npx create-remix@latest
  2. # 选择Remix App Server
  3. npm install
  4. npm run dev
  5. # 打开 http://localhost:3000

你的第一个路由

添加一个/posts路由

  1. // app/routes/index.tsx
  2. import { Link } from "remix";
  3. // 在你想要的地方 将以下代码写入tsx内
  4. <Link to="/posts">去Posts</Link>
  6. // 例如：
  7. export default function Index() {
  8.   return (
  9.       <Link to="/posts">去Posts</Link>
  10.   )
  11. }

返回浏览器，单击链接。你应该会看到一个404页面，因为我们还未创建该路由。现在让我们来创建posts路由的代码文件
创建一个新文件 文件路径为 app/routes/posts/index.tsx
或者在命令行内输入以下命令
mkdir app/routes/posts
touch app/routes/posts/index.tsx

给posts路由编写UI

  1. // app/routes/posts/index.tsx
  2. export default function Posts() {
  3.   return (
  4.     <div>
  5.       <h1>Posts</h1>
  6.     </div>
  7.   );
  8. }

刷新浏览器后再查看新的路由效果

加载数据

Remix中内置了数据加载

如果在过去的几年中你从事过web开发的话，你可能习惯在这里创建两个东西：一个提供数据的API路由和一个使用它的前端组件。但在Remix中，你的前端组件也是它自己的API路由，并且它已经知道如何通过浏览器在服务器上与自己通信，也就是说你不需要去获取它。

如果你的工作经验更久远，并且是使用像Rails这样落后一点的 MVC Web 框架，那么你可以把Remix路由看作是使用React进行模板制作的后台界面，但是它们知道如何在浏览器中无缝的添加一些特性，而不是编写前后端分离的jQuery代码来修饰用户交互，这就是渐进式增强的充分体现，此外你的路由就是它们自己的控制器。

写一个 posts 路由 loader

  1. // app/routes/posts/index.tsx
  2. import { useLoaderData } from "remix";
  4. export const loader = async () => {
  5.   return [
  6.     {
  7.       slug: "my-first-post",
  8.       title: "My First Post"
  9.     },
  10.     {
  11.       slug: "90s-mixtape",
  12.       title: "A Mixtape I Made Just For You"
  13.     }
  14.   ];
  15. };
  17. export default function Posts() {
  18.   const posts = useLoaderData();
  19.   console.log('posts', posts);
  20.   return (
  21.     <div>
  22.       <h1>Posts</h1>
  23.     </div>
  24.   );
  25. }

loader是组件的后端API，它已经通过useLoaderData为你连接起来。在Remix路由中，客户端和服务器之间的界限有点模糊，如果你的服务器和浏览器的控制台都打开了，你会注意到它们都记录了我们的post数据，这是因为Remix在服务器上渲染，可以像传统的web框架一样发送一个完整的html，同样的它在客户端也记录这些。

在posts内渲染数据

添加Post类型和useloaderData范型，这样即使在网络请求中，也能获取可靠的类型安全性，因为它都是在同一个文件中定义的，除非在Remix的网络请求瘫痪了，否则这个组件和它的API都具有类型安全（请记住，该组件已经是它自己的API路由）

  1. import { useLoaderData } from "remix";
  3. export type Post = {
  4.   slug: string;
  5.   title: string;
  6. };
  8. export const loader = async () => {
  9.   const posts: Post[] = [
  10.     {
  11.       slug: "my-first-post",
  12.       title: "My First Post",
  13.     },
  14.     {
  15.       slug: "90s-mixtape",
  16.       title: "A Mixtape I Made Just For You",
  17.     },
  18.   ];
  19.   return posts;
  20. };
  22. export default function Posts() {
  23.   const posts = useLoaderData<Post[]>();
  24.   console.log("posts", posts);
  25.   return (
  26.     <div>
  27.       <h1>Posts</h1>
  28.     </div>
  29.   );
  30. }

重构：将异步获取数据逻辑抽离为getPosts

创建文件
touch app/post.ts

  1. // app/post.ts
  2. export type Post = {
  3.   slug: string;
  4.   title: string;
  5. };
  7. export function getPosts() {
  8.   const posts: Post[] = [
  9.     {
  10.       slug: "my-first-post",
  11.       title: "My First Post"
  12.     },
  13.     {
  14.       slug: "90s-mixtape",
  15.       title: "A Mixtape I Made Just For You"
  16.     }
  17.   ];
  18.   return posts;
  19. }
  1. // app/routes/posts/index.tsx
  2. import { useLoaderData } from "remix";
  3. import { getPosts } from "~/post";
  4. import type { Post } from "~/post";
  6. export const loader = async () => {
  7.   return getPosts();
  8. };
  10. export default function Posts() {
  11.   const posts = useLoaderData<Post[]>();
  12.   console.log("posts", posts);
  13.   return (
  14.     <div>
  15.       <h1>Posts</h1>
  16.     </div>
  17.   );
  18. }

从markdown文件中获取数据

在本章节，我们将只使用文件系统，从中读取数据。

  1. # 在项目的根目录创建一个 posts 文件夹
  2. mkdir posts
  3. # 添加一些posts文件
  4. touch posts/my-first-post.md
  5. touch posts/my-second.md

写一些你想要的东西进去，但要确保它们的包含标题
my-first-post.md

  1. ---
  2. title: My First Post
  3. ---
  5. # This is my first post
  7. Isn't it great?

my-second.md

  1. ---
  2. title: My Second Post
  3. ---
  5. # 90s Mixtape
  7. - I wish (Skee-Lo)
  8. - This Is How We Do It (Montell Jordan)
  9. - Everlong (Foo Fighters)
  10. - Ms. Jackson (Outkast)
  11. - Interstate Love Song (Stone Temple Pilots)
  12. - Killing Me Softly With His Song (Fugees, Ms. Lauryn Hill)
  13. - Just a Friend (Biz Markie)
  14. - The Man Who Sold The World (Nirvana)
  15. - Semi-Charmed Life (Third Eye Blind)
  16. - ...Baby One More Time (Britney Spears)
  17. - Better Man (Pearl Jam)
  18. - It's All Coming Back to Me Now (Céline Dion)
  19. - This Kiss (Faith Hill)
  20. - Fly Away (Lenny Kravits)
  21. - Scar Tissue (Red Hot Chili Peppers)
  22. - Santa Monica (Everclear)
  23. - C'mon N' Ride it (Quad City DJ's)
  1. # 解析md文件
  2. npm add front-matter
  3. # 校验数据真假
  4. npm add tiny-invariant
  1. // app/post.ts
  2. import path from "path";
  3. import fs from "fs/promises";
  4. import parseFrontMatter from "front-matter";
  5. import invariant from "tiny-invariant";
  7. export type Post = {
  8.   slug: string;
  9.   title: string;
  10. };
  12. // post md文件属性
  13. export type PostMarkdownAttributes = {
  14.   title: string;
  15. };
  16. /**
  17.  * post文件夹路径
  18.  * path.join(__dirname, "..", "posts") 这段官方代码文件路径有误
  19.  */
  20. // const postsPath = path.join(__dirname, "..", "posts");
  21. const postsPath = path.resolve("posts");
  23. /**
  24.  * 校验md文件是否有title属性
  25.  */
  26. function isValidPostAttributes(
  27.   attributes: any
  28. ): attributes is PostMarkdownAttributes {
  29.   return attributes?.title;
  30. }
  32. export async function getPosts() {
  33.   // 读取文件夹
  34.   const dir = await fs.readdir(postsPath);
  36.   return Promise.all(
  37.     dir.map(async (filename) => {
  38.       const file = await fs.readFile(path.join(postsPath, filename));
  39.       // 格式化md文件 读取文件元属性
  40.       const { attributes } = parseFrontMatter(file.toString());
  41.       // 如果md文件不包含校验的属性 就会抛出错误提示
  42.       invariant(
  43.         isValidPostAttributes(attributes),
  44.         `${filename} 有错误的元数据`
  45.       );
  46.       return {
  47.         slug: filename.replace(/\.md$/, ""),
  48.         title: attributes?.title,
  49.       };
  50.     })
  51.   );
  52. }

动态路由参数

本章节我们将实现以下两个路由
/posts/my-first-post
/posts/my-second-post
我们可以在url中使用动态变量，而不是为每一个文章创建一个新的路由，Remix会解析并传给我们，让我们可以动态的查询路由

touch app/routes/posts/\$slug.tsx

  1. // app/routes/posts/\$slug.tsx
  2. import { useLoaderData } from "remix";
  3. import type { LoaderFunction } from "remix";
  4. import invariant from "tiny-invariant";
  6. import { getPost } from "~/post";
  8. export type Post = {
  9.   slug: string;
  10.   title: string;
  11. };
  13. export const loader: LoaderFunction = async ({ params }) => {
  14.   invariant(params.slug, "expected params.slug");
  15.   return getPost(params.slug);
  16. };
  18. export default function PostSlug() {
  19.   const post = useLoaderData<Post>();
  20.   console.log("post", post);
  21.   return (
  22.     <div>
  23.       <h1>{post.title}</h1>
  24.     </div>
  25.   );
  26. }
  27. import { useLoaderData } from "remix";
  28. import type { LoaderFunction } from "remix";
  29. import invariant from "tiny-invariant";
  31. import { getPost } from "~/post";
  33. export const loader: LoaderFunction = async ({ params }) => {
  34.   invariant(params.slug, "expected params.slug");
  35.   return getPost(params.slug);
  36. };
  38. export default function PostSlug() {
  39.   const post = useLoaderData();
  40.   return (
  41.     <div>
  42.       <h1>{post.title}</h1>
  43.     </div>
  44.   );
  45. }
  1. // app/post.ts
  2. import path from "path";
  3. import fs from "fs/promises";
  4. import parseFrontMatter from "front-matter";
  5. import invariant from "tiny-invariant";
  7. export type Post = {
  8.   slug: string;
  9.   title: string;
  10. };
  12. // post md文件属性
  13. export type PostMarkdownAttributes = {
  14.   title: string;
  15. };
  16. /**
  17.  * post文件夹路径
  18.  * path.join(__dirname, "..", "posts") 这段官方代码文件路径有误
  19.  */
  20. // const postsPath = path.join(__dirname, "..", "posts");
  21. const postsPath = path.resolve("posts");
  23. /**
  24.  * 校验md文件是否有title属性
  25.  */
  26. function isValidPostAttributes(
  27.   attributes: any
  28. ): attributes is PostMarkdownAttributes {
  29.   return attributes?.title;
  30. }
  32. export async function getPost(slug: string) {
  33.   const filepath = path.join(postsPath, slug + ".md");
  34.   const file = await fs.readFile(filepath);
  35.   const { attributes } = parseFrontMatter(file.toString());
  36.   invariant(
  37.     isValidPostAttributes(attributes),
  38.     `Post ${filepath} is missing attributes`
  39.   );
  40.   return { slug, title: attributes.title };
  41. }
  43. export async function getPosts() {
  44.   // 读取文件夹
  45.   const dir = await fs.readdir(postsPath);
  47.   return Promise.all(
  48.     dir.map(async (filename) => {
  49.       const file = await fs.readFile(path.join(postsPath, filename));
  50.       // 格式化md文件 读取文件元属性
  51.       const { attributes } = parseFrontMatter(file.toString());
  52.       // 如果md文件不包含校验的属性 就会抛出错误提示
  53.       invariant(
  54.         isValidPostAttributes(attributes),
  55.         `${filename} 有错误的元数据`
  56.       );
  57.       return {
  58.         slug: filename.replace(/\.md$/, ""),
  59.         title: attributes?.title,
  60.       };
  61.     })
  62.   );
  63. }
  1. // app/routes/posts/index.tsx
  2. import { useLoaderData } from "remix";
  3. import { getPosts } from "~/post";
  4. import type { Post } from "~/post";
  6. export const loader = async () => {
  7.   return getPosts();
  8. };
  10. export default function Posts() {
  11.   const posts = useLoaderData<Post[]>();
  12.   console.log("posts", posts);
  13.   return (
  14.     <div>
  15.       <h1>Posts</h1>
  16.     </div>
  17.   );
  18. }

个人博客效果

效果：
image.png

  1. mkdir app/styles
  2. touch app/styles/admin.css
  3. touch app/routes/admin.tsx
  1. .admin {
  2.   display: flex;
  3. }
  5. .admin > nav {
  6.   padding-right: 2rem;
  7. }
  9. .admin > main {
  10.   flex: 1;
  11.   border-left: solid 1px #ccc;
  12.   padding-left: 2rem;
  13. }
  15. em {
  16.   color: red;
  17. }
  1. // app/routes/admin.tsx
  2. import { Link, useLoaderData } from "remix";
  4. import { getPosts } from "~/post";
  5. import type { Post } from "~/post";
  6. import adminStyles from "~/styles/admin.css";
  8. export const links = () => {
  9.   return [{ rel: "stylesheet", href: adminStyles }];
  10. };
  12. export const loader = async () => {
  13.   return getPosts();
  14. };
  16. export default function Admin() {
  17.   const posts = useLoaderData<Post[]>();
  18.   return (
  19.     <div className="admin">
  20.       <nav>
  21.         <h1>Admin</h1>
  22.         <ul>
  23.           {posts.map((post) => (
  24.             <li key={post.slug}>
  25.               <Link to={`/posts/${post.slug}`}>{post.title}</Link>
  26.             </li>
  27.           ))}
  28.         </ul>
  29.       </nav>
  30.       <main>...</main>
  31.     </div>
  32.   );
  33. }

访问：http://localhost:3000/admin 查看效果

嵌套路由

在上一章 在routes/admin.tsx 匹配了 /admin 路由地址
在本章节将基于上一章的代码来演示如何编写 /admin的子路由 /admin/news

  1. # 首先在routes下创建admin文件夹，并在目录下创建index.tsx文件
  2. # 之前的 /routes/admin.tsx不用删除 我们将在此处添加子路由入口
  3. mkdir app/routes/admin
  4. touch app/routes/admin/index.tsx
  1. // app/routes/admin/index.tsx
  2. import { Link } from "remix";
  4. export default function AdminIndex() {
  5.   return (
  6.     <p>
  7.       <Link to="new">Create a New Post</Link>
  8.     </p>
  9.   );
  10. }

写完以上代码后 即使你刷新浏览器也不会看到它，因为你还没给这段代码放置一个出口

  1. // app/routes/admin.tsx
  2. import { Outlet, Link, useLoaderData } from "remix";
  4. // ...省略代码别复制
  6. export default function Admin() {
  7. // ......省略代码别复制
  9.   return (
  10.     // ... 省略部分tsx代码
  11.       <main>
  12.       // 将Outlet组件放在你想让你的子路由代码展现的位置、
  13.       // 这里会将 app/routes/admin/**.tsx 映射为对应的 /admin/** 路由地址
  14.       // 对应的子路由文件内的tsx将会在Outlet处渲染
  15.       <Outlet />
  16.     </main>
  17.   )
  18. }

最终效果：
image.png

在线写博客

本章节将会演示如何在/admin/new中使用表单创建新的markdown文件

  1. // /app/post.ts
  3. // 在之前代码后面添加以下代码
  5. type NewPost = {
  6.   title: string;
  7.   slug: string;
  8.   markdown: string;
  9. };
  10. export async function createPost(post: NewPost) {
  11.   const md = `---\ntitle: ${post.title}\n---\n\n${post.markdown}`;
  12.   await fs.writeFile(path.join(postsPath, post.slug + ".md"), md);
  13.   return getPost(post.slug);
  14. }
  1. // app/routes/admin/new.tsx
  2. import { useActionData, Form, redirect } from "remix";
  3. import type { ActionFunction } from "remix";
  4. import invariant from "tiny-invariant";
  5. import { createPost } from "~/post";
  7. type PostError = {
  8.   title?: boolean;
  9.   slug?: boolean;
  10.   markdown?: boolean;
  11. };
  13. export const action: ActionFunction = async ({ request }) => {
  14.   await new Promise((res) => setTimeout(res, 1000));
  15.   const formData = await request.formData();
  16.   const title = formData.get("title");
  17.   const slug = formData.get("slug");
  18.   const markdown = formData.get("markdown");
  19.   const errors: PostError = {};
  20.   if (!title) errors.title = true;
  21.   if (!slug) errors.slug = true;
  22.   if (!markdown) errors.markdown = true;
  24.   if (Object.keys(errors).length) {
  25.     return errors;
  26.   }
  27.   invariant(typeof title === "string");
  28.   invariant(typeof slug === "string");
  29.   invariant(typeof markdown === "string");
  30.   await createPost({ title, slug, markdown });
  31.   return redirect("/admin");
  32. };
  34. export default function NewPost() {
  35.   const errors = useActionData();
  37.   return (
  38.     <Form method="post">
  39.       <p>
  40.         <label>
  41.           Post Title: {errors?.title ? <em>Title is required</em> : null}{" "}
  42.           <input type="text" name="title" />
  43.         </label>
  44.       </p>
  45.       <p>
  46.         <label>
  47.           Post Slug: {errors?.slug ? <em>Slug is required</em> : null}{" "}
  48.           <input type="text" name="slug" />
  49.         </label>
  50.       </p>
  51.       <p>
  52.         <label htmlFor="markdown">Markdown:</label>{" "}
  53.         {errors?.markdown ? <em>Markdown is required</em> : null}
  54.         <br />
  55.         <textarea id="markdown" rows={20} name="markdown" />
  56.       </p>
  57.       <p>
  58.         <button type="submit">Create Post</button>
  59.       </p>
  60.     </Form>
  61.   );
  62. }

源码

my-remix.zip
这份代码不是根据教程的命令行生成的，而是使用vercel创建的模板
但本章节读取文件的代码在vercel是不生效的，在vercel的server less function 是不支持文件系统api访问的，但不要担心,源码可在本地环境访问，最后请勿用在生产环境。