Feature Request: Prevent duplicate history entries when navigating to the current route

[umsungjun]

Problem

When using useNavigate, navigating to the currently active route still pushes a duplicate entry onto the browser history stack.

<button onClick={() => navigate('/contents/blog')}>
  Blog
</button>

If the user is already on /contents/blog, clicking the button adds another identical history entry. This causes the browser back button to navigate to the same page again, which can feel broken from a UX perspective.

Currently, developers need to manually guard against this:

const { pathname } = useLocation();

const navigateTo = (path: string) => {
  if (pathname !== path) {
    navigate(path);
  }
};

---

Proposed Solutions

Option 1

navigate('/contents/blog', { skipIfSame: true });

Option 2

const navigateTo = useNavigateTo();

navigateTo('/contents/blog');

---

Would it be okay if I worked on a PR for this?

[chrisjcthomas]

Pushing a duplicate URL to the browser history stack is intentional and mirrors standard HTML5 History API (history.pushState) semantics.

There are valid scenarios where pushing the same path is required:

• Resetting scroll restoration to top on re-clicking the current page.
• Re-triggering route loaders / action submissions.
• Resetting state when navigating back to a parent or reset route.

Because this is standard browser behavior, React Router leaves history stack control to the caller rather than auto-filtering identical pushes.

Idiomatic Solutions

1. Use { replace: true }

If you do not want to add a new history entry when clicking a link or button, use the replace option:

navigate('/contents/blog', { replace: true });

Or with <Link>:

<Link to="/contents/blog" replace>
  Blog
</Link>

2. Guard with a custom hook or helper function

If you want to skip navigation completely when the target matches the current location (including search params and hash):

import { useLocation, useNavigate } from 'react-router';

export function useSafeNavigate() {
  const navigate = useNavigate();
  const location = useLocation();

  return (to: string, options?: { replace?: boolean }) => {
    const currentFullUrl = location.pathname + location.search + location.hash;
    if (to !== currentFullUrl && to !== location.pathname) {
      navigate(to, options);
    }
  };
}

3. For navigation menus, use <NavLink>

If this is for UI navigation, <NavLink> exposes isActive so you can disable or style active items without triggering unnecessary navigations:

<NavLink to="/contents/blog">
  {({ isActive }) => (
    <span aria-current={isActive ? 'page' : undefined}>Blog</span>
  )}
</NavLink>