remix.run - 重定向路由并显示消息

Question

我想知道是否有一种方法可以重定向路由或返回带有数据的 Response 并使用 loader 函数在另一个页面获取它。

基本上我正在尝试创建一个带有表单的新对象并重定向到另一个我想显示创建成功消息的页面。

这是一个表单页面示例:

我正在尝试在 Response 正文中发送消息。

import { ActionFunction, Form } from "remix";

export const action: ActionFunction = async ({ request }) => {
  // const formData = await request.formData();

  return new Response(JSON.stringify({ message: "Hello world!" }), {
    status: 303,
    headers: {
      Location: "/new-page",
    },
  });
};

export default function Index() {
  return (
    <div>
      <Form method="post">
        <input type="text" id="name" name="name" />
        <button type="submit">Submit</button>
      </Form>
    </div>
  );
}

在 NewPage 中，我需要知道是否有办法在重定向响应中获取消息。

import { ActionFunction } from "remix";

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();

  // Get message here

  return {
    message: "",
  };
};

export default function NewPage() {
  return <div>New Page</div>;
}

Answer 1

这是 session flash 消息的一个很好的用例 😎

https://remix.run/docs/en/v1/api/remix#sessionflashkey-value

文档提供了一个很好的例子，但背后的想法是:

• 在 Index 的操作中获取表单数据
• 将字符串化数据存储在 session cookie 闪存消息中
• 返回响应，使用重定向功能(从 remix 导入的帮助器，为您生成响应重定向)
• 在 NewPage 的加载器中，读取 session cookie 消息并将其返回。不要忘记提交您的 session ，它会为您删除这条快闪消息
• 在您的组件中使用 useLoaderData 钩子(Hook)来获取加载程序的返回数据

//sessions.server.ts
import { createCookieSessionStorage } from "remix";

// https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage
const { getSession, commitSession, destroySession } =
  createCookieSessionStorage({
    cookie: {
      name: "__session",
      secrets: ["r3m1xr0ck5"], // should be a process.env.MY_SECRET
      sameSite: "lax",
    },
  });

import { ActionFunction, Form } from "remix";
import { getSession, commitSession } from "./sessions";

export const action: ActionFunction = async ({ request }) => {
  // const formData = await request.formData();

  session.flash("myMessageKey", "Hello world!");

  return redirect("/new-page", {
    headers: {
      "Set-Cookie": await commitSession(session),
    },
  });
};

export default function Index() {
  return (
    <div>
      <Form method="post">
        <input type="text" id="name" name="name" />
        <button type="submit">Submit</button>
      </Form>
    </div>
  );
}

import { LoaderFunction } from "remix";
import { getSession, commitSession } from "./sessions";

export const loader: LoaderFunction = async ({ request }) => {
  const formData = await request.formData();

  // Get message here
  const session = await getSession(
    request.headers.get("Cookie")
  );
  const message = session.get("myMessageKey") || null;

  return json(
    { message },
    {
      headers: {
        "Set-Cookie": await commitSession(session), //will remove the flash message for you
        // "Set-Cookie": await commitSession(session, { maxAge: SESSION_MAX_AGE }), //re set max age if you previously set a max age for your sessions.
      },
    }
  );
};

export default function NewPage() {
  const { message } = useLoaderData();
  return <div>New Page {message}</div>;
}