如何在呈现或更改组件时保持歌曲播放，并使用 React js 更新底部导航栏中的 play/pause 状态
How to keep song playing when component is rendered or changed and also update play/pause status in bottom navbar using react js
ReactJs.
- 显示专辑名称列表的主页说 'album abc'。
- 用户点击专辑 'abc' 并看到与该专辑关联的歌曲列表，例如歌曲 1、歌曲 2、歌曲 3。
- User plays song1（歌曲已播放）
现在这就是我想要做的，
在第 3 步之后，我希望底部的音乐导航栏在播放时显示歌曲名称并显示正在播放的图标。 （就像 jiosaavan 和其他应用程序一样）
此外，当我播放歌曲并移至另一个组件时，歌曲会暂停。
[我正在使用 ref 播放歌曲]
注意：我的代码不好，所以我从头到尾都在看
谢谢。
尝试在 app.js 中使用组件，就像 navHeader 一样，并将音乐详细信息保存在该组件中，每次更改组件时都不会呈现，这可能会有所帮助。
<Router>
your list of route here...
<musicPlayer/>
</Router>
ReactJs.
- 显示专辑名称列表的主页说 'album abc'。
- 用户点击专辑 'abc' 并看到与该专辑关联的歌曲列表，例如歌曲 1、歌曲 2、歌曲 3。
- User plays song1（歌曲已播放）
现在这就是我想要做的， 在第 3 步之后，我希望底部的音乐导航栏在播放时显示歌曲名称并显示正在播放的图标。 （就像 jiosaavan 和其他应用程序一样）
此外，当我播放歌曲并移至另一个组件时，歌曲会暂停。 [我正在使用 ref 播放歌曲]
注意：我的代码不好，所以我从头到尾都在看 谢谢。
尝试在 app.js 中使用组件，就像 navHeader 一样，并将音乐详细信息保存在该组件中，每次更改组件时都不会呈现，这可能会有所帮助。
<Router>
your list of route here...
<musicPlayer/>
</Router>