Pass props from page to components in Nextjs

Question

I want to pass my props from a page to all other components. I have a dynamic route set up like this.

-pages
  -[tv]
  -index.js
   -category
   -index.js
   ...

So the rout looks like this: pages/[tv]/category/...

My index.js, child of folder [tv], page code.

const Home = props => {
  const router = useRouter()
  const { tv } = router.query
  console.log(tv) //Value that i want to pass as props to other components.

So i want to pass value of tv to other components as props. Hope my question is not too vague.

Thank you

Answer 1

If those components are rendered in Home component, you can just pass tv as prop:

const SomeComponent = props => {
  const { query } = useRouter()
  const { tv } = query
  // ...
}

const Home = props => {
  // ...

  return (
    <SomeComponent />
  )
};

If you don't want prop drilling then you can just use the useRouter hook.