React-Router：如何通过react-router-dom的<Redirect/>收集浏览历史？

嘿，咱们来拆解下你的浏览器回退按钮为啥行为异常，以及怎么用react-router-dom在React单页应用里正确收集浏览历史。

为什么

return (<Redirect/>)

会导致回退异常？ #

核心原因是 <Redirect/>（react-router-dom v5及更早版本）的默认行为是使用replace模式，而不是push模式。

简单来说：

假设你的浏览路径是 首页 → 页面A，然后在页面A里用<Redirect to="/页面B"/>，这时候历史记录里的页面A会被页面B直接替换，最终历史链变成首页 → 页面B。当你点击回退按钮时，自然就回到首页，而不是你预期的页面A——因为页面A的历史条目已经被覆盖了。

正确收集浏览历史的解决方案 #

根据你使用的react-router-dom版本，分两种情况处理：

情况1：使用v5及更早版本 #

方案A：用history.push()替代默认Redirect

如果是在事件触发时跳转（比如按钮点击），直接调用history.push()来添加新的历史条目：

• 函数组件（用useHistory钩子）：

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

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

  const handleJump = () => {
    // 用push新增历史条目，回退时能回到当前页
    history.push('/target-page');
  };

  return <button onClick={handleJump}>跳转到目标页</button>;
}

• 类组件（用withRouter注入history）：

import { withRouter } from 'react-router-dom';
import React from 'react';

class MyPage extends React.Component {
  handleJump = () => {
    this.props.history.push('/target-page');
  };

  render() {
    return <button onClick={handleJump}>跳转到目标页</button>;
  }
}

export default withRouter(MyPage);

方案B：给<Redirect>添加push={true}属性

如果一定要用<Redirect>组件（比如挂载时自动跳转），可以手动开启push模式，让它新增历史条目而不是替换：

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

function LoginSuccess() {
  // 这里push={true}会保留之前的历史条目
  return <Redirect to="/dashboard" push={true} />;
}

情况2：使用v6版本 #

v6已经移除了<Redirect>组件，改用<Navigate>组件，它的默认行为就是push模式（新增历史条目），完美解决你的问题：

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

function MyPage() {
  const needRedirect = true;
  
  if (needRedirect) {
    // 默认是push行为，回退时能回到当前页
    return <Navigate to="/target-page" />;
  }

  return <div>当前页面内容</div>;
}

// 如果你确实需要replace模式（替换当前历史条目），才手动设置replace={true}
// <Navigate to="/target-page" replace={true} />

验证历史记录是否正确 #

你可以打开浏览器开发者工具的Application标签，找到History面板，查看历史条目列表——如果每个跳转都新增了一条记录，说明配置正确；如果条目被替换了，那就是用了replace模式。

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