-
Hello every one, I was looking for adding links dynamically and I was reading this post : This post sent me here. Here is my code, very simple : import { json, LinksFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { DynamicLinksFunction } from "remix-utils";
import { MyComponent } from "~/components/my-components";
import { getData } from "~/utils/home.server";
export const loader: LoaderFunction = async ({ request }) => {
const ld = await getData()
return json(ld)
}
export const links: LinksFunction = () => {
return []
}
export const dynamicLinks: DynamicLinksFunction<LoaderData> = ({ data }) => {
console.log("Pouik")
console.log(data)
return [
{ rel: "", href: "" }
];
};
export const meta: MetaFunction = ({ data: LoaderData }) => {
console.log("plouf")
return {
title: "Pouik",
description: "Pouik"
};
};
export default function Index() {
const data = useLoaderData<LoaderData>()
return (
<MyComponent data={data} />
);
} When I reach the page in a browser, I can see that in the console :
so "plouf" was logged by the MetaFunction and it seems that my DynamicLinksFunction is never called because I can't see its log. In the root, I added correctly the export default function App() {
return (
<html lang="fr">
<head>
<Meta />
<DynamicLinks />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
} Did I miss something to make this DynamicLinksFunction called ? Thank you |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
You shouldn't export export let handle = { dynamicLinks } |
Beta Was this translation helpful? Give feedback.
You shouldn't export
dynamicLinks
directly, instead thehandle
export and add dynamicLinks as a key there.