Next.js 永久组件 - 即使在更改页面后也能播放的 Youtube 嵌入

Question

我正在尝试创建一个 Next.js React 应用程序。要求之一是 youtube 播放器在更改页面时必须坚持。唯一的问题是我不确定 Next 的工作方式是否可行。似乎无论结构如何，页面都会重新安装。

在我的应用程序中，我将 Index 导出到 page.js 作为父组件。

<Media/> //Youtube player

page.js 将始终重新安装，因此玩家将重新加载。

page.js:

import React from 'react';
import { Provider } from 'react-redux';
import { checkLang } from '../helpers/langSupport';
import { changeLang } from '../store/actions/langAction';
import store from '../store/store';
import { Router } from '../config/router';
import Media from './youtube';
import Head from './head';
import Nav from './nav';

const childPage = (ChildPage) => {
    return (
        class Page extends React.Component {
            componentDidMount(){
                this.checkLanguage()
            }

            checkLanguage() {
                checkLang(this.props.url, (status, result) => {
                    if(status){
                        store.dispatch(changeLang(result))
                    }else{
                        Router.pushRoute('/en'+this.props.url.asPath)
                    }
                })
            }

            render() {
                return (
                    <Provider store={store}>
                        <div>
                            <Head />
                            <Nav />
                            <ChildPage {...this.props} />
                            <Media/>
                        </div>
                    </Provider>
                )
            }
        }
    )
}

export default childPage;

index.js:

import React from 'react';
import { connect } from 'react-redux'
import { add, minus } from '../store/actions/countAction';
import Page from '../components/page';

export class Index extends React.Component {
  render() {
    return (
      <div>
        <div className="hero">
          Count: {this.props.count.count}
          <br/><br/>
          <button onClick={()=>this.props.dispatch(add(1))}>Add</button>
          <button onClick={()=>this.props.dispatch(minus(1))}>Minus</button>
        </div>
        <style jsx>{`
          .hero{
            margin-left: 50px;
          }
        `}</style>
      </div>
    )
  }
}

export default Page(connect(state=>state)(Index));

Answer 1

不幸的是，这在 Next.js 中尚不存在。虽然它正在积极讨论并且可能会在不久的将来实施。

ReactDOM.render 会在每次页面更改时调用，所以今天这是不可能的。

查看讨论：

Answer 2

这已经实现为 _app.js。查看 next.js readme 以了解更多信息。

Next.js 永久组件 - 即使在更改页面后也能播放的 Youtube 嵌入

Next.js Persistent component - Youtube embed that plays even after changing page

javascript

reactjs

server-side-rendering

next.js

nextjs