如何使用React Router在路由之间共享组件

Question

我是新手反应/ redux并尝试使用音频播放器构建一个反应应用程序，页面中的页脚是“粘性的”。这意味着，如果有人开始播放曲目，则当用户导航应用程序中的其他页面时，该曲目将继续播放。想想spotify或soundcloud。

我当前的代码是以音频播放器在其自己的组件中的方式构建的，但我想知道如何在应用程序的各个页面之间共享该组件。

我目前将播放器包含在每个“页面”的 FooterPlayer 组件中

render(){

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

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


    }

问题是，当用户单击链接离开此页面并导航到另一个页面时，FooterPlayer组件将卸载。如何使用反应路由器构建应用程序，允许您持久保存组件并在“页面”之间共享它们？

注意，如果有帮助，我也会使用redux。

播放器位于“粘性”页脚的应用程序页面的屏幕截图。