React中如何管理带动态ID的深度路由页面实现返回上一页

方案一：直接复用浏览器历史记录（最简单） #

不需要手动传递任何ID，直接借助浏览器的历史记录逻辑处理返回。用react-router-dom的useNavigate钩子调用navigate(-1)，或者直接用window.history.back()，让浏览器自动识别上一页路径，完全不用关心来源分类。

示例代码：

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

const SubCategoryPage = () => {
  const navigate = useNavigate();

  return (
    <BackArrow onClick={() => navigate(-1)} title="返回分类页"/>
  );
};

方案二：通过路由参数传递父分类ID（更稳定可控） #

如果需要在子分类页面明确获取父分类信息（比如做面包屑导航），可以把父分类ID嵌入子分类的路由路径中，路由配置示例：

// 路由定义
<Route path="/category/:catId/subcategory/:subCatId" element={<SubCategoryPage />} />

然后在子分类页面用useParams直接提取父分类ID：

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

const SubCategoryPage = () => {
  const { catId } = useParams();

  return (
    <BackArrow to={`/category/${catId}`} title="返回分类页"/>
  );
};

这种方式比location.state更可靠——state数据在页面刷新后会丢失，而路由参数是持久化的，不会因为刷新失效。

方案三：优化location.state的使用（适合临时场景） #

你当前用的location.state方法本身可行，但要解决页面刷新后数据丢失的问题，需要加兜底逻辑：

import { useLocation, useParams, useNavigate } from 'react-router-dom';

const SubCategoryPage = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const catID = location.state?.id;

  const handleBack = () => {
    if (catID) {
      navigate(`/catPage/${catID}`);
    } else {
      // 兜底：state丢失时直接返回上一页
      navigate(-1);
    }
  };

  return <BackArrow onClick={handleBack} title={location.state?.name || "返回"}/>;
};

关于Redux的使用 #

如果项目已经在全局管理分类数据，用Redux存储父分类ID是可行的，但没必要为了这一个功能特意引入Redux——上述前两种方案已经足够解决问题。

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