title: How to pass object with history.push in react-router v5?
body: <p>How do I play a sound on the /start-sound and stop the sound on the /stop-sound?</p>
  
  <p><strong>/start-sound</strong></p>
  
  <pre><code>const history = useHistory();
  
  const startSound = () =&gt; {
    const sound = new Audio("test.mp3");
    sound.play();
    history.push("/stop-sound", [sound]);
  }
  </code></pre>
  
  <p><strong>/stop-sound</strong></p>
  
  <pre><code>const stopSound = () =&gt; {
    sound.pause();
    sound.currentTime = 0;
  }
  </code></pre>
  
  <p>This code will display an error in the browser.</p>
  
  <blockquote>
    <p>　DataCloneError: Failed to execute 'pushState' on 'History': An object could not be cloned.</p>
  </blockquote>
  
  <hr>
  
  <pre><code>history.push("/stop-sound", [sound]);
  </code></pre>
  
  <p>This style will follow the React Router documentation.</p>
  
  <p><a href="https://reacttraining.com/react-router/web/api/history" rel="nofollow noreferrer">React Router | history</a></p>
  
  <p>And I don't know how to use sound object with /stop-sound.</p>
  
  <hr>
  
  <h2>Another example</h2>
  
  <p><a href="https://codesandbox.io/s/elated-panini-b7n6s?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">demo</a></p>
  
  <p><strong>/pass-text</strong></p>
  
  <pre><code>const PassTextPage = () =&gt; {
    const history = useHistory();
  
    const passText= () =&gt; {
      history.push({
        pathname: "/view-text",
        state: { name: "Hello" }
      });
    };
  
    return &lt;button onClick={passText}&gt;pass&lt;/button&gt;;
  };
  </code></pre>
  
  <p><strong>/view-text</strong></p>
  
  <pre><code>const ViewTextPage = () =&gt; {
    const text = props.location.state.name; // 'props' is not defined.
  
    const viewText = () =&gt; {
      console.log(text);
    };
  
    return &lt;button onClick={viewText}&gt;view&lt;/button&gt;;
  };
  </code></pre>
  
  <p><strong>App.jsx</strong></p>
  
  <pre><code>const App = () =&gt; (
    &lt;BrowserRouter&gt;
      &lt;Route exact path="/"&gt;
        &lt;Home /&gt;
      &lt;/Route&gt;
      &lt;Route exact path="/pass-text"&gt;
        &lt;PassTextPage /&gt;
      &lt;/Route&gt;
      &lt;Route exact path="/view-text"&gt;
        &lt;ViewTextPage /&gt;
      &lt;/Route&gt;
    &lt;/BrowserRouter&gt;
  );
  </code></pre>