Question

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

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

我要建模的东西类似于Spotify的声音系统，在该声音系统上，单击播放列表或个人资料链接后，当前正在播放的音乐不会中断或从头开始播放。我的网站目前确实做到这一点：更改页面时，声音从头开始。这是由于这样的事实，当我使用react-router-dom时，我相信发生的是整个页面都被重新渲染，声音也随之渲染。

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

编辑：谢谢小费，麦克斯。这是我的代码（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

感谢Arman Charan的回答！

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

Answer 2

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

如果声音是从根部播放的（在示例中为const App = ()），则在更改路线后声音将继续播放（在示例中，声音的成分应类似于它们使用<header />的方式）在所有嵌套路线中都可见）

使用React-Sound的React-Router-Dom

2 个答案: