javascript - How to pass object with history.push in react-router v5? - Stack Overflow

admin管理员组

文章数量:1317909

How do I play a sound on the /start-sound and stop the sound on the /stop-sound?

/start-sound

const history = useHistory();

const startSound = () => {
  const sound = new Audio("test.mp3");
  sound.play();
  history.push("/stop-sound", [sound]);
}

/stop-sound

const stopSound = () => {
  sound.pause();
  sound.currentTime = 0;
}

This code will display an error in the browser.

　DataCloneError: Failed to execute 'pushState' on 'History': An object could not be cloned.

---

history.push("/stop-sound", [sound]);

This style will follow the React Router documentation.

React Router | history

And I don't know how to use sound object with /stop-sound.

---

Another example

demo

/pass-text

const PassTextPage = () => {
  const history = useHistory();

  const passText= () => {
    history.push({
      pathname: "/view-text",
      state: { name: "Hello" }
    });
  };

  return <button onClick={passText}>pass</button>;
};

/view-text

const ViewTextPage = () => {
  const text = props.location.state.name; // 'props' is not defined.

  const viewText = () => {
    console.log(text);
  };

  return <button onClick={viewText}>view</button>;
};

App.jsx

const App = () => (
  <BrowserRouter>
    <Route exact path="/">
      <Home />
    </Route>
    <Route exact path="/pass-text">
      <PassTextPage />
    </Route>
    <Route exact path="/view-text">
      <ViewTextPage />
    </Route>
  </BrowserRouter>
);

How do I play a sound on the /start-sound and stop the sound on the /stop-sound?

/start-sound

const history = useHistory();

const startSound = () => {
  const sound = new Audio("test.mp3");
  sound.play();
  history.push("/stop-sound", [sound]);
}

/stop-sound

const stopSound = () => {
  sound.pause();
  sound.currentTime = 0;
}

This code will display an error in the browser.

　DataCloneError: Failed to execute 'pushState' on 'History': An object could not be cloned.

---

history.push("/stop-sound", [sound]);

This style will follow the React Router documentation.

React Router | history

And I don't know how to use sound object with /stop-sound.

---

Another example

demo

/pass-text

const PassTextPage = () => {
  const history = useHistory();

  const passText= () => {
    history.push({
      pathname: "/view-text",
      state: { name: "Hello" }
    });
  };

  return <button onClick={passText}>pass</button>;
};

/view-text

const ViewTextPage = () => {
  const text = props.location.state.name; // 'props' is not defined.

  const viewText = () => {
    console.log(text);
  };

  return <button onClick={viewText}>view</button>;
};

App.jsx

const App = () => (
  <BrowserRouter>
    <Route exact path="/">
      <Home />
    </Route>
    <Route exact path="/pass-text">
      <PassTextPage />
    </Route>
    <Route exact path="/view-text">
      <ViewTextPage />
    </Route>
  </BrowserRouter>
);

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Dec 24, 2019 at 16:11 Jay White asked Dec 24, 2019 at 8:46 Jay WhiteJay White 31522 gold badges33 silver badges1212 bronze badges 9

• include props in const ViewTextPage = (props) – kumaran Commented Dec 24, 2019 at 13:58
• I got the error "TypeError: Cannot read property 'location' of undefined". – Jay White Commented Dec 24, 2019 at 14:20
• Post the parent ponent of viewTextPage ponent – kumaran Commented Dec 24, 2019 at 14:37
• Added parent ponents for two ponents. – Jay White Commented Dec 24, 2019 at 14:42
• 1 Change your parent ponent something like this <Route exact path="/view-text" ponent={ViewTextPage} /> – kumaran Commented Dec 25, 2019 at 4:05

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 7

The way you can pass property to navigated ponent

history.push({
pathname: '/stop-sound',
  state: { name: 'Hello'}
});

access like this in navigated ponent.

if its stateless ponent

let location = useLocation();

location.state.name

if class based ponent

 this.props.location.state.name

本文标签： javascriptHow to pass object with historypush in reactrouter v5Stack Overflow