How to Programmatically navigate using React router?

With react-router I can use the Link element to create links which are natively handled by react router. I see internally it calls this.context.transitionTo(...). If I want to do a navigation not from a link, but from a dropdown selection for example. How can I do this in code?
You can use For React Router v4+


You can use useNavigate for simplicity

import { useNavigate } from "react-router-dom";

const Newfile = () => {
   const navigate = useNavigate();



export default Newfile;

There is a new useHistory hook in React Router >5.1.0 if you are using React >16.8.0 and functional components.


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

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

  function handleClick() {

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

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

const Component = (props) => {

   const history = useHistory();

 // Programmatically navigate



the withRouter higher-order component will inject the history object as a prop of the component. This allows you to access the push and replace methods without having to deal with the context.

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const Button = withRouter(({ history }) => (
    onClick={() => { history.push('/new-location') }}
    Click Me!