Stop Audio on Route Change in React?
<p>everyone. I'm still getting used to React and React Router, and this is one thing I have no figured out.</p>

<p>So, I have an app that plays a video (muted) and an audio track at the same time. I am using <a href="https://github.com/CookPete/react-player" rel="nofollow" title="react-player">React Player</a> to play both. My view looks like this (VideoPlayer is the react-player tag):</p>

<pre><code>&lt;div&gt;
    &lt;VideoPlayer url={this.props.audio} playing={this.state.playing} /&gt;
    &lt;VideoPlayer url={this.props.video} playing={this.state.playing} /&gt;
&lt;/div&gt;
</code></pre>

<p>This setup has worked for me, and I am able to play and control them both via a common state. I can stop them via an event handler I hooked up to a button:</p>

<pre><code>handleStop() {
    this.setState({playing: false})
}
</code></pre>

<p>And this works as well.</p>

<p>The issue, however, is that once I navigate to a different route, the audio (and presumably the video) remains playing in the background. Actually, let me rephrase, the audio <strong>restarts</strong> in the background when I change routes.</p>

<p>After reading <a href="https://github.com/reactjs/react-router/blob/master/docs/guides/ComponentLifecycle.md" rel="nofollow">this page from the react-router docs</a>, I have tried to include logic to call <code>handleStop</code> in various lifecycle events, yet none of them does the trick. So far, I have tried putting calls to <code>handleStop</code> in <code>componentWillReceiveProps</code>, <code>componentWillUpdate</code>, <code>componentDidUpdate</code> and <code>componentWillUnmount</code>.</p>

<p>The closest I got was putting the call in <code>componentWillUnmount</code>, but I always receive an error about setting the state of an unmounted component (which doesn't make sense either, if this is called <em>before</em> unmounting?).</p>

<p>So, by any chance, does anybody know where to put my call to handleStop?</p>

<p>Thanks in advance.</p>