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

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-dom 中的 useHistory() 钩子。阅读文档：

The useHistory hook gives you access to the history instance that you may use to navigate.

尝试如下：

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

我建议从那里看一下 this file。我已经在我的代码片段中包含了上面的基本工作示例。

希望对您有所帮助！

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;

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

How do I use history prop with other props

javascript

history

reactjs

react-router-dom

react-hooks