Question

0

191

Views

Render router query parameters on first render

Problem

In my nextjs typescript setup I have a dynamic route in a file called [name].tsx. Based on the name I want to prefll meta tags. React router can retrieve the value stored in the name parameter but the only after rendering my component with name = undefined. This causes the meta tags to contain name = undefined as well. How can I fill the meta tags with the correct value on the first render?

Code

import { useEffect } from "react";
import { useRouter } from "next/router";

function Page() {
  const router = useRouter();
  const { name } = router.query;
  useEffect(() => {
    if (!name) {
      return;
    }
  }, [name]);

  return (
    <head>
      <meta property="og:description" content={"My name is " + name} />
    </head>
  );
}

export default Page;

Test

Enter the URL of the page including the route here: https://cards-dev.twitter.com/validator

Some say this isn't possible. Is this true?

Solutions that don't work for me:

There used to be componentWillMount, but it's deprecated and UNSAFE_componentWillMount doesn't work for me. (`componentWillMount` warnings visible even though 'componentWillMount' is not explicitly used)
Using a hook instead of componentWillMount doesn't work for me (first render still name = undefined) How to use componentWillMount() in React Hooks?
Render null if name undefined - doesn't prevent initial render.
Maybe there is a way to achieve this using react context? useRouter/withRouter receive undefined on query in first render (answer by Hunter Medney)

about 4 years ago · Juan Pablo Isaza

Answer question

0

191

Render router query parameters on first render

Find remote jobs

Andres GPT