如何用useNavigate实现支持自定义返回层级的BackButton组件

你不需要重写全部onClick逻辑，只要给现有BackButton组件做小幅度扩展即可，改完后现有所有页面的调用代码完全不需要改动，不会破坏原有默认行为。

具体实现 #

给组件增加可选的返回步数参数，默认值保持为返回1页，仅在需要特殊处理的场景覆盖参数即可，修改后的组件代码如下：

import React from "react";
import { useNavigate } from "react-router";
import { KeyboardArrowLeft } from "@material-ui/icons";
import { Button } from "@mui/material";
import "./Buttons.css";

export const BackButton = ({ delta = -1 }) => {
  const navigate = useNavigate();
  return (
    <Button
      onClick={() => navigate(delta)}
      className="back-button"
      size="large"
      startIcon={<KeyboardArrowLeft />}
    />
  );
};

使用方式 #

• 普通页面（你之前已经部署的所有页面无需修改代码）：直接按原有方式调用，默认保持返回1页的行为

  <BackButton />
  

• 少数需要返回2页的特定路由场景：传入delta={-2}覆盖默认值即可

  <BackButton delta={-2} />
  

可选优化（无需手动传参版本） #

如果你不想在每个特殊页面手动传参，也可以直接在组件内部结合路由路径做自动判断，统一配置特殊路由规则：

import React from "react";
import { useNavigate, useLocation } from "react-router";
import { KeyboardArrowLeft } from "@material-ui/icons";
import { Button } from "@mui/material";
import "./Buttons.css";

export const BackButton = ({ delta }) => {
  const navigate = useNavigate();
  const location = useLocation();

  // 在这里配置所有需要返回2页的特殊路由路径
  const twoStepBackRoutes = ["/special/page1", "/special/page2"];
  // 优先使用外部传入的delta参数，未传参时自动判断当前路由是否属于特殊路由
  const finalDelta = delta ?? (twoStepBackRoutes.includes(location.pathname) ? -2 : -1);

  return (
    <Button
      onClick={() => navigate(finalDelta)}
      className="back-button"
      size="large"
      startIcon={<KeyboardArrowLeft />}
    />
  );
};

这种改法完全向下兼容，没有侵入性，不需要批量修改已有代码，后续如果有其他返回步数的需求（比如返回3页）也可以直接传参支持，灵活性很高。

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