下一个视图转换

下一个视图转换

在 Next.js App Router 中使用视图转换 API。

演示。

免责声明

该库针对视图转换和 Next.js App Router 的基本用例。对于更复杂的应用程序和用例，如并发渲染、Suspense 和流媒体，未来仍需要将新的原语和 API 开发为 React 和 Next.js 的核心（更多）。

安装

使用您最喜欢的包管理器来安装next-view-transitions包。例如：

pnpm install next-view-transitions

用法

使用布局文件中的组件包裹您的内容：

 import { ViewTransitions } from 'next-view-transitions'

export default function Layout ( { children } ) {
  return (
    < ViewTransitions >
      < html lang = 'en' >
        < body >
          { children }
        < / body >
      < / html >
    < / ViewTransitions >
  )
}

然后，对需要触发视图转换的链接使用组件：

 import { Link } from 'next-view-transitions'

export default function Component ( ) {
  return (
    < div >
      < Link href = '/about' > Go to /about < / Link >
    < / div >
  )
}

或者使用useTransitionRouter钩子进行编程导航：

 import { useTransitionRouter } from 'next-view-transitions'

export default function Component ( ) {
  const router = useTransitionRouter ( )

  return (
    < div >
      < button onClick = { ( ) => {
        // All Next.js router methods are supported
        router . push ( '/about' )
      } } > Go to /about < / button >
    < / div >
  )
}

就是这样！

执照

麻省理工学院。