Remix.run -公共共享组件

Question

我刚刚开始学习remix.run，虽然我已经读完了教程，但我还是有点不知道该如何在混合中实现它。

如果我想显示一个通用的标题，它可能会根据登录用户的状态切换一个“登录/注销”按钮，那么它会在哪里运行呢？

我的下一个想法是创建组件并在公共文档中引用它们。我知道我可以在remix.server和remix.client文件中做到这一点，但由于我的“登录”组件是一条路由，而不是一条路由(例如，当用户提交登录表单但GET /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>
        </>
    )
}

谢谢

Answer 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("/");
};