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

Question

I'm using react-router-dom with react . I'm trying to have other props with the history prop

import React from 'react';

function MyComponent({ history }) {
   function redirect() {
      history.push('/path');
   }

   return (
      <>
         <button onClick={redirect}>Some Button</button>
      </>
   );
}

export default MyComponent;

This will work, but if I put another prop like this

function MyComponent({myFunction, history}) {}

This wouldn't work

Is there any alternatives to this, or am I doing something wrong?

Answer 1

Instead you can useuseHistory() hook from react-router-dom . Read from the documentation:

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

Try as the following:

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;

If you need a fully working example, please find one of my GitHub repositiries below: https://github.com/norbitrial/react-router-programmatically-redirect-examples

I suggest to take a look at this file from there. I have already included the essential working example above in my code snippet.

I hope this helps!

Answer 2

Try this - you can receive as many props as you want.

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;