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

您只需要拉出Music Component，使其本身成为一个独立的组件，然后将其传递到单个孩子中的HashRouter以及其余Routes中。

这里是一个example，用于在React App的每个路由中实现NavBar。

如何在每条路线上使用功能正常的组件？

1 个答案: