如何在react-router-dom中实现多路由回退且保留回退链路？

First, let's break down how the browser's native history API works with your scenario:
Your initial history stack looks like this: /page1 > /page2 > /page3 > /page4 > /page5 (with your current position on /page5).

Native history.go(-3) Should Work Exactly as You Want #

If you're using plain vanilla JavaScript, calling history.go(-3) from /page5 will:

• Move your current history pointer back 3 positions to /page2 without adding any new entries to the stack
• The original stack ([page1, page2, page3, page4, page5]) stays intact
• After that, history.goBack() (or history.go(-1)) will take you straight to /page1—precisely what you're aiming for.

If you're seeing go(-3) act like push(), it's almost certainly due to one of these reasons:

• You're using a client-side routing library (like React Router or Vue Router) that might override default browser behavior, or you're accidentally using a "push" navigation method instead of a back navigation.
• You're modifying the history state with pushState before/after calling go(-3), which adds new entries to the stack unintentionally.

Fixes for Common Scenarios #

1. Vanilla JavaScript (No Framework)

Double-check you're not adding extra history entries by mistake. Use this explicit code:

// When on /page5:
history.go(-3); // Navigates to /page2 without adding a new entry
// Later, to go back to /page1:
history.goBack();

2. Framework-Specific (e.g., React Router, Vue Router)

If you're using a routing library, make sure you're using the correct method to navigate back multiple steps:

• React Router (v6+): Use the useNavigate hook with a negative number:

  const navigate = useNavigate();
  // On /page5:
  navigate(-3); // Jumps back 3 steps to /page2
  // To go back to /page1 afterward:
  navigate(-1); // or just use the browser's back button
  

• Vue Router: Use $router.go(-3):

  // On /page5:
  this.$router.go(-3); // Navigates directly to /page2
  

Optional: Remove Forward History Entries #

If you want to ensure that after navigating to /page2, there's no way to go forward to /page3, /page4, or /page5 anymore, use this trick to truncate the history stack:

// On /page5:
// First, navigate back to /page2
history.go(-3);
// Then, replace the current entry to wipe forward history
history.pushState(null, '', window.location.href);
history.replaceState(null, '', window.location.href);

This works because pushing a new entry and immediately replacing it removes all forward-facing history entries. Now, history.goBack() will take you to /page1, and there won't be a forward navigation option available.

内容的提问来源于stack exchange，提问作者Alexandr