使用 React-Sound 的 React-Router-Dom

Question

我正在制作一个需要使用路由器来显示不同页面的网站。我决定使用 React，因为它易于使用。但是，在尝试合并声音时，我偶然发现了一个问题。

基本上，由于我正在制作路由器系统，因此我无法使声音正常工作，因此如果我更改页面，声音不会中断并从用户单击按钮更改页面时停止的位置继续播放。

我尝试建模的内容类似于 Spotify 的音响系统，在单击播放列表或个人资料链接时，当前正在播放的音乐不会从头中断或重新启动。我的网站目前正是这样做的：更改页面时，声音从头开始。这是因为，当使用react-router-dom 时，我相信发生的事情是整个页面被再次渲染，声音也随之而来。

有什么方法可以防止这种情况发生吗？我该如何解决这个问题？感谢您的回复！

编辑：感谢您的提示，Max。这是我的代码（App.js）：

import React, { Component } from 'react';
import './App.css';
import Navbar from "./components/Navbar";
import Gallery2018 from "./components/Gallery2018";
import Song from "./components/Song";
import Main from "./pages/Main";
import About from "./pages/About";
import Events from "./pages/Events";
import Contact from "./pages/Contact";
import Donate from "./pages/Donate";
import { BrowserRouter, Route } from "react-router-dom"

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Song />
          <Navbar />
          <Route exact={true} path = "/" render={() => (
            <div className = "App">
              <Main />
            </div>
          )}/>
          <Route exact={true} path = "/about" render={() => (
            <div className = "App">
              <About />
            </div>
          )}/>
          <Route exact={true} path = "/events" render={() => (
            <div className = "App">
              <Events />
            </div>
          )}/>
          <Route exact={true} path = "/contact" render={() => (
            <div className = "App">
              <Contact />
            </div>
          )}/>
          <Route exact={true} path = "/donate" render={() => (
            <div className = "App">
              <Donate />
            </div>
          )}/>
          <Route exact={true} path = "/gallery2018" render={() => (
            <div className = "App">
              <Gallery2018 />
            </div>
          )}/>
          <div className="copyright text-center" id="footer">© 2018 Aligarh Alumni Association New York. All Rights Reserved.</div>
        </div>
      </BrowserRouter>

    );
  }
}

export default App;

这里的大部分代码都是多余的，所以我将解释您需要查看的内容。基本上，我在这里使用了一个路由器机制，以及一个名为“Song”的组件，其代码在这里：

import React, { Component } from "react";
import Sound from "react-sound";
import soundfile from "./tarana.mp3";

class Song extends Component {
    render() {
        return (
            <Sound 
                url = {soundfile}
                playStatus = {Sound.status.PLAYING}
                playFromPosition = {8000}
                onLoading={this.handleSongLoading}
                onPlaying={this.handleSongPlaying}
                onFinishedPlaying={this.handleSongFinishedPlaying}
             />
        )
    }
}

export default Song

这首歌曲来自 react-sound 包，旨在为您的应用程序添加音乐。以我现在的代码设置方式，在 App.js 中，由于我有一个路由机制，每次单击相应的按钮以更改页面时我都会渲染页面，因此也会渲染 Song 组件，导致音乐从头开始。我希望在更改页面时，Song 组件不会因页面更改而中断。有没有办法使用我目前拥有的软件包来做到这一点？或者我应该改变我的包裹？再次感谢！

编辑 2：另外，如果您想知道我的路径按钮在哪里，链接位于导航栏组件中。

Answer 1

感谢阿曼查兰的回答！

基本上，我没有将组件放在块之外。这样做之后，它起作用了:)

Answer 2

https://reacttraining.com/react-router/web/guides/quick-start/example-nested-routing 。有一个嵌套组件的例子。

如果声音在根部播放（示例中为const App = ()），它将在更改路由后继续播放（在示例中它应该是一个类似于他们使用<header /> 的组件在所有嵌套中可见路线）