How do you programmatically navigate in React Router?

You can navigate programmatically using the useHistory hook (React Router v5) or

useNavigate hook (React Router v6).

For React Router v5 (useHistory):

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

function MyComponent() {

const history = useHistory();

const goToHome = () => {

history.push('/');

};

return <button onClick={goToHome}>Go to Home</button>;
}
For React Router v6 (useNavigate):

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

function MyComponent() {

const navigate = useNavigate();

const goToHome = () => {

navigate('/');

};

return <button onClick={goToHome}>Go to Home</button>;
}

React Performance Optimization