重定向路由并显示消息

Question

我想知道是否有办法用数据重定向路由或 return 一个 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

这是会话闪现消息的一个很好的用例

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

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

在 Index 的操作中获取您的表单数据
将字符串化数据存储在会话 cookie 闪存消息中
Return 一个响应，使用重定向功能（从 remix 导入的帮助程序，为您进行响应重定向）
在 NewPage 的加载器中，读取会话 cookie 消息并 return 它。不要忘记提交您的会话，它会为您删除这条闪现消息
在您的组件中使用 useLoaderData 挂钩获取加载程序的 return 数据

//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>;
}

重定向路由并显示消息

Redirect route and display message

remix.run

remix-run