https://i.sstatic.net/sjfmr.pngI recently came across a tutorial here that showed me how to render an image from the server side. The code I tried looks something like this:
import { Outlet, useLoaderData } from '@remix-run/react';
export async function loader() {
const response = await fetch('https://picsum.photos/500/300');
return {
imageUrl: response.url,
};
}
export default function RandomImageLayout() {
const imageData = useLoaderData<typeof loader>();
return (
<>
<img
src={imageData.imageUrl}
alt="Random Image"
style={{ maxWidth: '100%' }}
/>
<Outlet />
</>
);
}
While this code works perfectly in the _index.tsx file as expected, when I try to use it within another component, such as a contact-us component inside the _index.tsx file, it doesn't work and returns null.
Since I need to load a different image for my contact-us component, I tried using useLoaderData() inside it but it also returned null.
Is there a way to use different useLoaderData() for multiple components under the same route? Or is there a better approach I should consider?