React Router 5.2.0中Redirect后如何正确保留历史实现回退

你遇到的问题核心是**Redirect组件默认使用replace模式修改历史记录**，它会替换当前页面的历史条目，而非添加新条目，这就导致多级跳转后回退时直接跳过了中间页。

解决办法很直接：放弃Redirect组件，改用history.push()方法完成跳转。

具体实现 #

函数组件（使用useHistory钩子） #

React Router 5.2.0支持useHistory钩子，可直接在组件中获取history对象：

import { useHistory } from 'react-router-dom';
import ReactTable from 'your-react-table-path';

const PurchaseTable = ({ purchases }) => {
  const history = useHistory();

  const handleRowClick = (purchase) => {
    // 用push添加新的历史记录条目
    history.push(`/purchases/${purchase.order_number}`);
  };

  return (
    <ReactTable
      data={purchases}
      onRowClick={handleRowClick}
      // 其他表格配置项
    />
  );
};

export default PurchaseTable;

类组件（使用withRouter高阶组件） #

如果你的组件是类组件，用withRouter包裹组件来注入history属性：

import { withRouter } from 'react-router-dom';
import React, { Component } from 'react';
import ReactTable from 'your-react-table-path';

class PurchaseTable extends Component {
  handleRowClick = (purchase) => {
    this.props.history.push(`/purchases/${purchase.order_number}`);
  };

  render() {
    return (
      <ReactTable
        data={this.props.purchases}
        onRowClick={this.handleRowClick}
        // 其他表格配置项
      />
    );
  }
}

// 用withRouter包裹，注入history、location等路由属性
export default withRouter(PurchaseTable);

为什么这个方法有效 #

• history.push()会在浏览器历史栈中新增一条记录，而非替换当前记录。跳转路径会变成：/purchases/ → /purchases/:order_number → /routeC，回退时就会按/routeC → /purchases/:order_number → /purchases/的顺序正常返回。
• 之前用Redirect的方式相当于执行了history.replace()，会把/purchases/的历史条目替换成/purchases/:order_number，所以回退时直接跳过了中间页。

路由配置注意事项 #

确保你的路由配置中，具体的详情页路由放在列表页路由之前（或者给列表页路由加上exact属性），避免路由匹配错误：

import { Switch, Route } from 'react-router-dom';
import PurchaseList from './PurchaseList';
import PurchaseDetail from './PurchaseDetail';

const AppRoutes = () => (
  <Switch>
    {/* 更具体的路由放在前面 */}
    <Route path="/purchases/:order_number" component={PurchaseDetail} />
    <Route exact path="/purchases" component={PurchaseList} />
    {/* 其他路由... */}
  </Switch>
);

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