Как вы разделяете компоненты по маршрутам, используя React Router

Question

Я новичок в реагировании / редукции и пытаюсь создать приложение реагирования с аудиоплеером, который «застревает» в нижнем колонтитуле на разных страницах.Это означает, что если кто-то начинает воспроизводить дорожку, эта дорожка продолжает воспроизводиться, когда пользователь перемещается по другим страницам приложения.Подумайте spotify или soundcloud.

Мой текущий код структурирован таким образом, что аудиоплеер находится в своем собственном компоненте, но мне интересно, как я разделяю этот компонент на страницах приложения.

В настоящее время я включаю плеер в компонент FooterPlayer каждой "страницы", например, такой:

render(){

        const { width } = this.state;
        const isMobile = width <= 768;

        return(
            <div>
                <div>
                    <Header/>
                    {this.renderSeries(isMobile)}
                </div>
                <FooterPlayer/>
            </div>
        );


    }

Проблема заключается в том, что, когда пользователь нажимает ссылку наПокиньте эту страницу и перейдите на другую страницу, компонент FooterPlayer будет размонтирован.Как вы структурируете приложения с помощью реагирующего маршрутизатора, который позволяет вам сохранять компоненты и обмениваться ими между «страницами»?

Обратите внимание, я также использую приставку, если это поможет.

Снимок экрана страницы приложения с проигрывателем в "липком" нижнем колонтитуле.