Remix.run - 常见的共享组件答案

【问题标题】：Remix.run - common shared componentsRemix.run - 常见的共享组件
【发布时间】：2022-07-18 22:56:41
【问题描述】：

我刚刚开始学习 remix.run，虽然我已经完成了教程，但我仍然坚持如何在 remix 中实现它。

如果我想显示一个通用标题，该标题可能会根据用户登录状态切换登录/注销按钮，这将在哪里显示？

我 nextjs 的想法是创建组件并在公共文档中引用它们。我知道我可以在 remix.server 和 remix.client 文件中执行此操作，但是因为我的“登录”组件是并且不是路由（即，当用户提交登录表单但 GET 时，我可能想要 POST 到路由/login 不是真正的路由）你将如何构建这样的东西，并且这样做甚至允许我在共享组件中拥有加载器和操作功能？

我是否只需要调整我对如何在混音中实现这一点的想法，还是我想多了，以上是完全有效的？

我尝试了以下方法并且它有效。但是我最终只是创建了一个空的“注销”路由来处理表单数据，其中action 和loader 在操作的情况下处理表单，或者如果GET 通过加载程序请求则仅重定向。这是最好的方法吗？

export const SignIn = ({user}) => {
    return (
        <>
        <form method="POST"action="/logout">
            <input type="hidden" id="some" value="foo" />
        {user ? 
           (
                <button>sign out</button>
            )
        :  (
                <button>sign in</button>
            )
        }
        </form>
        </>
    )
}

谢谢

【问题讨论】：

标签： remix.run

【解决方案1】：

基于https://remix.run/docs/en/v1/tutorials/jokes#build-the-login-form 它确实看起来像是一条用于注销的空路径：

import type { ActionFunction, LoaderFunction } from "@remix-run/node"
import { redirect } from "@remix-run/node"
import { logout } from "~/utils/session.server"

export const action: ActionFunction = async ({request}) => {
  return logout(request);
};

export const loader: LoaderFunction = async () => {
  return redirect("/");
};

【讨论】：