Question

我正在尝试创建一个Next.js反应应用。其中一个要求是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嵌入即使在更改页面后也会播放

2 个答案: