Remix.run - common shared components

Question

I’m just getting started learning remix.run and whilst I’ve gone through the tutorials there’s one bit I’m stuck on how I should implement it in remix.

If I wanted to display a common header that might toggle a sign in/sign out button based on the users logged in state where would this live?

My nextjs thinking would be to create the components and reference them in the common document. I know I can do this in the remix.server and remix.client files, but as my “login” component is and isn’t a route (I.e I might want to POST to the route when a user submits the login form but GET /login isn’t really a route) how would you structure something like this and would doing this even allow me to have loader and action functions in the shared component?

Do I just need to adjust my thinking about how to achieve this in remix or am I overthinking it and the above is perfectly valid?

I tried the following and it works. But then I end up just creating an empty "logout" route to process the form data with an action and loader that process the form in the case of the action or just redirect if a GET request via the loader. Is this the best approach?

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

Thanks

Answer 1

based on https://remix.run/docs/en/v1/tutorials/jokes#build-the-login-form it does indeed look like an empty route for logout:

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