Allow passing meta config to the <Meta /> component using props #3941

runoncedev · 2022-08-06T01:56:06Z

runoncedev
Aug 6, 2022

I've a root.tsx file with:

export const meta: MetaFunction = () => {
  return {
    charset: "utf-8",
    title: "New Remix App",
    viewport: "width=device-width,initial-scale=1",
  };
};

export function CatchBoundary() {
  const caught = useCatch();

  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <div>
          <h1>Caught</h1>
          <p>Status: {caught.status}</p>
          <pre>
            <code>{JSON.stringify(caught.data, null, 2)}</code>
          </pre>
        </div>
      </body>
    </html>
  );
}

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Both the default exported component and CatchBoundary use the <Meta /> component, this causes the 200 and 404 pages to both have the title "New Remix App".

But I wanted to change the title in the case of 404 pages, so I removed the <Meta /> component from CatchBoundary and added a <title>:

<head>
  <title>Page not found</title>
  <Links />
</head>

But this is not great because now I need to manually add the rest of the meta tags:

<head>
  <meta charSet="utf-8" />
  <title>Page not found</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <Links />
</head>

So I wondered what if we could simple pass meta config to the <Meta /> component through props, something like:

<head>
  <Meta title="Page not found" />
  <Links />
</head>

This way it could overwirte the values from the exported MetaFunction and render:

<meta charset="utf-8" />
<title>Page not found</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />

Just as a reference, I really liked how this problem is solved in next/head.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Allow passing meta config to the <Meta /> component using props #3941

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Allow passing meta config to the <Meta /> component using props #3941

Uh oh!

Uh oh!

runoncedev Aug 6, 2022

Replies: 0 comments

runoncedev
Aug 6, 2022