React Pass history to a component defined in the Router

Question

I have this Router in my App.js:

                
                    <         


        

Answer 1

If you are working with a Functional Component, you can simply access the history instance object within your component using the useHistory hook, as stated on the React-Router documentation.

import { useHistory } from 'react-router-dom';


function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

If you are working with a Class Component, you can wrap your component with withRouter, and then access the history object within your component

import { withRouter } from 'react-router';

class YourComponent extends React.Component {

  render() {
    const { history } = this.props;

    return <OverflowMenuItem itemText="Edit" href="#" onClick={ () => history.push('/editProject')}/>;
  }
}

export default withRouter(YourComponent);