解决react-router-dom V6路由嵌套时，子路由无法显示的问题

警告提示：You rendered descendant <Routes> (or called useRoutes()) at "/home" (under <Route path="/home">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.

在这里插入图片描述

App.tsx

router v5的写法

  <Route path="/home" element={<Commonview />}></Route>

在这里插入图片描述

Commonview组件

在这里插入图片描述

子路由页面无法显示，并警告：You rendered descendant <Routes> (or called useRoutes()) at "/home" (under <Route path="/home">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.

在这里插入图片描述

经查阅文档可知: 在 v6 中，所有路由路径始终是完全匹配，不再像v4/5中那样匹配路径前缀。父/根路径需要指定 * 通配符，以便它们现在可以进行"前缀"匹配,所以解决办法是在App.tsx加上通配符*

<Route path="/*" element={<Commonview />}></Route>

在这里插入图片描述

在这里插入图片描述

问题完美解决！