Q81: What is the purpose of push() and replace() methods of history? - React & Modern Frontend (445 Qs)

A history instance has two methods for navigation purpose.

push()
replace()

If you think of the history as an array of visited locations, push() will add a new location to the array and replace() will replace the current location in the array with the new one.

Practical Code Example

jsx

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

function NavigationActions() {
  const navigate = useNavigate();
  return (
    <>
      {/* push: Adds new entry to history stack (User can click Back) */}
      <button onClick={() => navigate('/dashboard')}>Go to Dashboard</button>

      {/* replace: Replaces current entry (Back button skips replaced page) */}
      <button onClick={() => navigate('/login', { replace: true })}>Force Relogin</button>
    </>
  );
}