React-router-dom中Redirect未加入历史栈，回退/前进导航异常

嘿，我之前开发React项目时也踩过这个坑！你现在遇到的问题，核心原因是用组件内部state配合Redirect组件的方式，没有正确触发React Router的历史记录机制，导致浏览器的前进后退栈没有被正常更新。

问题根源 #

当你点击表格行时，只是更新了组件内部的id状态，然后靠Redirect组件根据这个state来跳转。默认情况下，Redirect组件是用history.replace()来执行重定向的——它会替换当前的历史记录条目，而不是添加新的。这样一来，点击跳转后，历史栈里并没有新增列表页到详情页的记录，自然就没法正常前进后退了。

解决方案 #

这里给你两种最常用的修复方式，选适合你项目的就行：

方案1：直接用history.push导航（推荐）

这种方式是React Router官方推荐的主动导航方式，能确保历史记录被正确添加。

• 如果是类组件，用withRouter高阶组件包装你的组件，拿到history对象：

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

class ContactsTable extends Component {
  handleRowClick = (contactId) => {
    // 直接调用history.push添加新的历史记录
    this.props.history.push(`/contacts/${contactId}`);
  };

  render() {
    return (
      <table>
        {this.props.contacts.map(d => (
          <tr key={d._id} onClick={() => this.handleRowClick(d._id)}>
            {/* 你的表格单元格内容 */}
          </tr>
        ))}
      </table>
    );
  }
}

// 用withRouter包装组件，注入history、location等路由属性
export default withRouter(ContactsTable);

• 如果是函数组件，用useHistory钩子更简洁：

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

function ContactsTable({ contacts }) {
  const history = useHistory();

  const handleRowClick = (contactId) => {
    history.push(`/contacts/${contactId}`);
  };

  return (
    <table>
      {contacts.map(d => (
        <tr key={d._id} onClick={() => handleRowClick(d._id)}>
          {/* 你的表格单元格内容 */}
        </tr>
      ))}
    </table>
  );
}

方案2：给Redirect添加push属性

如果你坚持要用Redirect组件的方式，只需要给它加上push={true}，让它用history.push()而不是replace()来执行重定向：

class ContactsTable extends Component {
  state = {
    redirectId: null
  };

  handleRowClick = (contactId) => {
    this.setState({ redirectId: contactId });
  };

  render() {
    const { redirectId } = this.state;
    // 如果有redirectId，就重定向并添加历史记录
    if (redirectId) {
      return <Redirect push to={`/contacts/${redirectId}`} />;
    }

    return (
      <table>
        {this.props.contacts.map(d => (
          <tr key={d._id} onClick={() => this.handleRowClick(d._id)}>
            {/* 你的表格单元格内容 */}
          </tr>
        ))}
      </table>
    );
  }
}

小提醒 #

相比Redirect，直接用history.push的逻辑更直观，不需要维护额外的组件状态，也更符合React Router的导航设计思路，所以优先推荐方案1哦～

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