如何使用工作功能在每条路线上渲染组件？

Question

我正在尝试渲染一个在每条路线上播放mp3的组件，并且尽管路由发生变化，但mp3仍然可以不间断地播放。我不确定这是否可行，但我认为它正在考虑React创建单页网站。

到目前为止，我只是得到了要渲染的组件，我的问题是所有的功能以及组件已经抓住工作......我无法弄清楚为什么..

 <HashRouter>
        <Route path="/" render={props => <Music />} />
        <Route exact path="/" component={Home} />
        <Route path="/work" component={MyWork} />
        <Route path="/about" component={About} />
  </HashRouter>

有问题的路线是第一个。我也尝试过这种想法，我需要传递道具才能使功能发挥作用

        <Route path="/" render={props => <Music
          changePlayingState={props.changePlayingState}
          playing={props.state.playing}
          showMusicMessage={props.showMusicMessage}
          hideMusicMessage={props.hideMusicMessage}/>} />

主页上显示了组件的工作版本（以及我希望它在所有路由上的显示方式）（单击播放）代码沙箱有一个文件大小限制所以我只是添加了一些弹出的声音效果（需要一秒钟才能开始打）

https://codesandbox.io/s/rlw1q45m1m

有关此问题的唯一组件（以及您唯一需要查看的内容）如下：

Index.js

路线：Home.js，About.js，MyWork.js

音乐组件：Music.js

如果需要任何其他信息，请询问！谢谢！

Answer 1

你只需要拉出音乐组件并使其成为一个独立的组件本身，然后将其传递给一个孩子和HashRouter其余部分的Routes。

这是一个example在React App的每个路线中实现NavBar。