Next.js Постоянный компонент - YouTube для встраивания, который воспроизводится даже после смены страницы

Я пытаюсь создать приложение реакции 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));
Источник

2 ответа

Решение

Теперь это было реализовано как _app.js, Проверьте readme next.js, чтобы узнать больше.

Источник

К сожалению, этого пока нет в Next.js. Хотя это активно обсуждается и, вероятно, будет реализовано в ближайшее время.

ReactDOM.render вызывается при каждом изменении страницы, поэтому сегодня это невозможно.

Смотрите обсуждения на:

Источник
Другие вопросы по тегам