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

时间:2019-09-26 08:40:22

标签: reactjs next.js

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

例如,如果我有一个video元素,并且希望更改路线后该视频仍能播放

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/>

共享元素将是视频标签,问题在于更改和渲染视频并重播的每条路线上

1 个答案:

答案 0 :(得分: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;