react-router-dom v6嵌套路由下PageNotFound页面失效问题求助

问题核心是当前路由结构中，/topic作为父路由会匹配所有以/topic开头的路径（包括/topic/product/random）。当访问这类未定义的子路径时，父路由<Topic/>会被渲染，而<SubTopic/>组件因处理额外路径带来的未定义数据报错，同时根路由的/*不会触发——因为路径已被/topic父路由匹配。

你可以通过以下两种方式解决：

方式一：在父路由/topic下添加子级404路由 #

给/topic新增匹配所有未定义子路径的路由，确保/topic下的无效路径直接渲染404：

<BrowserRouter>
  <Routes>
      <Route path='/' element={<Home/>} />
      <Route path="/topic" element={<Topic/>} >
           <Route path=':name' element={<SubTopic/>} />
           {/* 匹配/topic下所有未定义的子路径 */}
           <Route path='*' element={<PageNotFound/>} />
      </Route>
     <Route path='/*' element={<PageNotFound/>} />
  </Routes>
</BrowserRouter>

方式二：限制父路由/topic的匹配范围 #

如果/topic不需要作为独立页面（必须带子路径才能访问），可以调整路由结构，让非/topic/xxx的路径直接走到根404：

<BrowserRouter>
  <Routes>
      <Route path='/' element={<Home/>} />
      {/* 父路由仅作为容器，不单独匹配/topic路径 */}
      <Route path="/topic" >
           <Route path=':name' element={<SubTopic/>} />
      </Route>
     <Route path='/*' element={<PageNotFound/>} />
  </Routes>
</BrowserRouter>

提示：如果<Topic/>组件包含<Outlet/>用于渲染子路由，优先选择方式一；如果<Topic/>仅作为子路由容器、无需单独访问/topic页面，方式二更简洁。

内容的提问来源于stack exchange，提问作者Soumi Ghosh