如何将历史道具与其他道具一起使用

Question

我正在react-router-dom使用react. 我正在尝试使用其他道具history prop

import React from 'react';

function MyComponent({ history }) {

   function redirect() {

      history.push('/path');

   }

   return (

      <>

         <button onClick={redirect}>Some Button</button>

      </>

   );

}

export default MyComponent;

这会起作用，但如果我放另一个这样的道具

function MyComponent({myFunction, history}) {}

这行不通

有没有其他选择，或者我做错了什么？

Answer 1

相反，您可以使用react-router-domuseHistory()中的钩子。从文档中阅读：该useHistory钩子使您可以访问可用于导航的历史实例。尝试如下：import React from 'react';import { useHistory } from 'react-router-dom';function MyComponent({ myFunction }) { // here still you can pass other props&nbsp; &nbsp;let history = useHistory(); // meanwhile you have the history object&nbsp; &nbsp;function redirect() {&nbsp; &nbsp; &nbsp; history.push('/path');&nbsp; &nbsp;}&nbsp; &nbsp;return <>&nbsp; &nbsp; &nbsp; <button onClick={redirect}>Some Button</button>&nbsp; &nbsp;</>}export default MyComponent;如果您需要一个完整的示例，请在下面找到我的 GitHub 存储库之一： https ://github.com/norbitrial/react-router-programmatically-redirect-examples我建议从那里看一下这个文件。我已经在我的代码片段中包含了上面的基本工作示例。我希望这有帮助！

Answer 2

试试这个 - 你可以收到尽可能多的道具。import React from 'react';import { useHistory } from 'react-router-dom';function MyComponent() {const history = useHistory();&nbsp; &nbsp;function redirect() {&nbsp; &nbsp; &nbsp; history.push('/path');&nbsp; &nbsp;}&nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button onClick={redirect}>Some Button</button>&nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp;);}export default MyComponent;