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

2022-09-23 08:40:31 浏览数 (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的写法

代码语言:javascript复制
  <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加上通配符*

代码语言:javascript复制
<Route path="/*" element={<Commonview />}></Route>

问题完美解决!

0 人点赞