首先先看一下 整篇文章 大概能解决你50%的问题。
https://zhuanlan.zhihu.com/p/431389907
下面说说我搭建的项目 路由配置。
具体页面大概长这个样子
因为我的菜单只设计到3级路由 所以 菜单循环那块的写法如图
注意:这里的子页面跳转前面都要拼接一个 '/home' (因为我这里的路径配置是从后台配置里设置的,从后台拿到的数据里有,如果菜单是前台写死的话 那其实就不用配置前面的 /home 了)值域为啥这么写 请移步 上面的 链接 查看具体原因,新版本与旧版本的写法 可能差异比较大吧。
重点关注 Outlet 这个玩意。
引入 import {Link,Outlet }from "react-router-dom";
使用 <Outlet /> (在父组件中使用Outlet来显示匹配到的子组件)
点击菜单 跳转成功!