将道具从页面传递到Nextjs中的组件

Question

我想将道具从页面传递到所有其他组件。我设置了这样的动态路由。

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

所以溃败看起来像这样：pages / [tv] / category /...

我的index.js，文件夹[tv]的孩子，页面代码。

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

所以我想将tv的值传递给其他组件作为道具。 希望我的问题不要太含糊。

谢谢

Answer 1

如果这些组件是在Home组件中呈现的，则只需传递tv作为道具：

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

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

  return (
    <SomeComponent />
  )
};

如果您不想进行道具钻探，则可以使用useRouter钩子。