如何在 Next.js 中的路由之间使用共享组件

Question

我正在考虑从 create-react-app 迁移到 Next.js 我需要在 Next.js 中的路由之间共享组件我尝试了下面的布局文件示例，它对我来说效果很好，但我有一个特殊情况，我需要共享组件位于路由器本身之上。

例如，如果我有一个视频元素，并且希望在更改路线后视频仍然播放

const Layout = (props) => (
  <div>
      {props.children}
      <video width="400" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
        Your browser does not support HTML5 video.
      </video>

  </div>
)

const Home = () => (
  <Layout>
    <Link href="/about"><a>About</a></Link>
    <h1 className='title'>Welcome to Home!</h1>
  </Layout>
)

const About = () => (
  <Layout>
    <Link href="/"><a>Home</a></Link>
    <h1 className='title'>Welcome to About!</h1>
  </Layout>
)

来自另一个使用 create-react-app 和 reach-router 的项目的示例播放器组件在路由器上方

<Layout>
    <Player/>
    <Router className={'router'}>
        <Login path={Routes.login}/>
        <NotFound404 default/>
        <Home path={Routes.root}/>
        <Test path={Routes.test}/>
    </Router>
<Layout/>

共享元素将是视频标签，问题出在视频渲染和重播的每次路由更改上

Answer 1

您可能想查看有关使用 pages/_app.js 的文档。

示例用法如下所示：

import Head from "next/head";

type Props = {
  pageProps: any;
  Component: React.FC;
};

const App = ({ Component, pageProps }: Props) => {
  return (
    <>
      <Head>
        // You can put whatever you want to put in your document head
      </Head>

      <YourSharedComponent />

      <Component {...pageProps} />

      <style>{`
        // styles...
      `}</style>
    </>
  );
};

App.getInitialProps = async ({ Component }) => {
  const pageProps = Component.getInitialProps && await Component.getInitialProps(ctx, loggedUser);

  return {
    pageProps,
  }
};

export default App;

如何在 Next.js 中的路由之间使用共享组件

How can I use shared components between routes in Next.js

reactjs

next.js