1import React, { useRef, useEffect } from 'react';
2import waves from '../audio/waves.mp3';
3    
4const RockyCoast = (props) => {
5    // the audio variable needs to be stored in a ref in order to access it across renders
6    let audio = useRef();
7    // start the audio (using the .current property of the ref we just created) when the component mounts using the useEffect hook
8    useEffect(() => {
9        audio.current = new Audio(waves)
10        audio.current.play()
11    }, [])
12    // Stop the audio when the component unmounts
13    // (not exactly what you asked re React Router, but similar idea)
14    useEffect(() => {
15        return () => {
16            audio.current.pause()
17            console.log("in cleanup")
18        }
19    }, [])
20    ...
21
22    return (
23        <>
24            ...
25        </>
26    )
27}
28export default RockyCoast;
29
30