大致需求图示如上:
需求:
1. 点击page2默认进入`/page2/中国`
2. 在中国界面选择省份,进入浙江省
3. 在浙江省中选择市,进入杭州市
4. 选择大学,进入浙江大学
5. 点击面包屑中某个tab,进入对应tab界面,组件/路由切换
6. 路由携带参数,如面包屑中的数据
实现过程:
在page2组件内(仅供参考):
<div className={styles.title}>
<Breadcrumb separator="->" items={breadcrumbItems} />
</div>
<Routes>
<Route path="chinaMap" element={<ChinaMap />} />
<Route path="/" element={<Navigate to="/gradingRanking/chinaMap" />} />
<Route path="chinaMap/:provincial" element={<ProvincialMap />} />
<Route path="chinaMap/:provincial/:city" element={<City />} />
<Route
path="chinaMap/:provincial/:city/:school"
element={<SchoolDetails />}
/>
</Routes>
在国家/省份/城市等组件中传递参数,切换路由组件,使用params传参
主要用到 useParams useNavigate (注意:useHistory v6版本不可用)
通过以下方法获取参数:
const params = useParams();
params.xxx
通过以下方式传递参数/切换路由组件:
const navigate = useNavigate();
const params = useParams();
navigate(`/xxx/xxx/${params.provincial}/${city}`)
以上,完成了路由组件的切换,参数的传递。
接下来通过在page2组件内通过设置 antd的组件<Breadcrumd /> 的 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中即可。
可能还需要再细化一下,但是大致思路就是这样:
- 首先在中间组件page2中放进去breadcrumb和routers;
- 接着在routers中的组件里通过useParams useNavigate完成传参和跳转;
- 最后在page2组件中处理params得到url和name并按固定格式放进items。
需要注意的是:
routers中组件的注册因为用的是params传参,因此书写方式是/xxx/:xxx/:xxx(冒号后面是这个参数的id)