react | react-router-dom v6 结合 antd 面包屑 ｜嵌套路由

      
title}>
        <Breadcrumb separator="->" items={breadcrumbItems} />
      

在国家/省份/城市等组件中传递参数，切换路由组件，使用params传参

主要用到 useParams useNavigate （注意：useHistory v6版本不可用）

通过以下方法获取参数：

const params = useParams();
params.xxx

通过以下方式传递参数/切换路由组件：

const navigate = useNavigate();
const params = useParams();
navigate(`/xxx/xxx/${params.provincial}/${city}`)

以上，完成了路由组件的切换，参数的传递。

接下来通过在page2组件内通过设置 antd的组件 的 items属性，实现点击面包屑切换路由组件的功能。在这里，我没有按照antd官网的代码来实现，因为不太适合这个需求，也或许是我没摸明白怎么用，下面是我参考官网按照自己的方法来实现的代码（这里的gradingRanking等同于上文的page2，chinaMap等同于中国，这里的代码仅供参考，重点是思路）。

  const params = useParams();
 
  let arr = Object.values(params)[0]
    .split("/")
    .filter((i) => i != "chinaMap" && i);
  const extraBreadcrumbItems = arr.map((item, index) => {
    let url = `/gradingRanking/chinaMap/${arr.slice(0, index + 1).join("/")}`;
    return {
      key: url,
      title: <Link to={url}>{item}Link>,
    };
  });
  const breadcrumbItems = [
    {
      title: <Link to="/gradingRanking">中国Link>,
      key: "中国",
    },
  ].concat(extraBreadcrumbItems);

在page2这个组件中不通过useEffect直接获取params是只能获取到一个key-value（当前路由）的，因此直接通过split切割为数组，并在此时通过filter筛选掉chinaMap（也就是page2这个组件的路由）。

遍历这个数组，使用slice切割数组到对应位置，并通过 / 连接。

这样就得到了 url（/page2/中国 或者/page2/中国/浙江省） 和 item（中国/浙江省 之类breadcrumb名称）。

将他们concat进items中即可。

可能还需要再细化一下，但是大致思路就是这样：

1. 首先在中间组件page2中放进去breadcrumb和routers；
2. 接着在routers中的组件里通过useParams useNavigate完成传参和跳转；
3. 最后在page2组件中处理params得到url和name并按固定格式放进items。

需要注意的是：

routers中组件的注册因为用的是params传参，因此书写方式是/xxx/:xxx/:xxx（冒号后面是这个参数的id）