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

381 阅读1分钟

警告提示: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>

在这里插入图片描述

在这里插入图片描述

问题完美解决!