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

Question

我正在react-router-dom使用react. 我正在尝试使用其他道具history propimport 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

   let history = useHistory(); // meanwhile you have the history object

   function redirect() {

      history.push('/path');

   }

   return <>

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

   </>

}

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();

   function redirect() {

      history.push('/path');

   }

   return (

      <>

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

      </>

   );

}

export default MyComponent;