clientAction can use in layout file?

[diukawsar]

In my scenario what i have, i have a layout route which have header and outlet like this

const layout = ()=>{
return <div><Header /><Outlet/></div>;
}

but in this layout i have three different pages, but a form of support with email , message i am using. which need clientAction, but its hard to declare condition to handle the action in three page separately. so if its possible to use clientAction in the layout.jsx may it better and i wont have to write the same code in three different page clientAction.

do have any solution of this problem?

[sergiodxa]

You can't point to an action in a pathless layout route (defined in routes.ts with layout helper) because a layout route doesn't have a URL to point to.

You could do it if it's not a pathless layout but a route that works as a layout (defined in routes.ts with route helper)

What you can do is to create a resource route, a route without a component, only a loader or action, and fetch that using useFetcher.

[MikeAtPeach]

Hey Segio, I'm trying to do something similar with a loader in a layout - to populate dynamic items in a nav drawer and I'm just not winning. Am I missing something obvious?

// routes.ts
import { route, index, type RouteConfig } from "@react-router/dev/routes"

export default [
    route("", "./components/Nav.tsx", [
    index("./routes/index.tsx"),
])] satisfies RouteConfig

// ./components/Nav.tsx
export async function loader({ params }: Route.LoaderArgs) {
 return await someFunction()
}

export function MainLayout({ loaderData }: Route.ComponentProps) {
    console.log(loaderData)
    return (<SomeNav {...loaderData} ><Outlet /></SomeNav>)