我正在考虑从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/>
共享元素将是视频标签,问题在于更改和渲染视频并重播的每条路线上
答案 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;