Router slug is first empty then correctly filled

[Axiol]

Hello there. I'm trying to get the URL slug inside a variable at the page load. As simple as that. But there's a catch.

First here is what I have in pages/profile/[...slug].js :

// ...
const Profile = () => {
  const router = useRouter();
  const slug = router.query.slug || [];
  const target = slug[0];
  console.log(target);
  const [tab, setTab] = useState(target);
// ...

And the issue is, on each page load the console.log is triggered 2 times. First time is undifined and then there's the expected value. I don't get why is done 2 times and mainly why is the first one undifined. Because, during SSR, Router has access to the full URL, hasn't it?

[jamesmosier]

This is expected per the docs. Next triggers an update to the router after hydration.

You must account for this in your code using something like:

const router = useRouter()
const slug = router.query.slug || [];
const target = slug[0];
const [tab, setTab] = useState(target);

useEffect(() => {
  if (target) {
     setTab(target)  
  }
}, [target])

[Axiol]

Oh ok, I did try something like that but without useEffect and it was indeed not working. Ok ok, thank you