React Router跳转路径更新后对应组件无法渲染问题排查

共3个配置错误共同导致地址栏更新但页面无内容渲染：

• 重复嵌套Router破坏路由上下文：React Router 要求整个应用仅在最顶层用一次BrowserRouter作为所有路由、Link组件的全局上下文。你已经在App.js外层包了全局Router，又在Deck组件内部单独引入并嵌套了一层新的BrowserRouter，内层Router会持有完全独立的路由历史记录，根本感知不到外层的路径变化，自然无法匹配到目标组件。
• 路由路径写法错误+配置位置错位：
  • 写的Link跳转路径decks/${flashcard.id}没有开头的斜杠，属于相对路径，路由匹配时会基于当前路径做错误拼接，没法稳定命中目标路径。
  • 把详情页的Route配置写在每个Deck组件内部的Switch里逻辑完全错位：当路径跳转到/decks/xxx时，App.js外层的Switch只配置了精确匹配/的首页路由，根本没有详情页的路由规则；内层Deck组件的Switch因为嵌套了独立Router，也没法正确匹配路径，自然渲染不出内容。
• 404组件位置错误：直接把NotFound放在Router外层，它会被无条件渲染，根本实现不了路由未匹配时才展示的效果。

1. 删掉Deck.js里所有导入的Router、Switch、Route代码，整个应用只保留App.js最外层那一个全局BrowserRouter即可。Deck组件里只保留用来跳转的Link标签——Link在全局Router上下文下可以正常工作，不需要额外包裹Router。
2. 修正Link的跳转路径为绝对路径：把<Link to={decks/${flashcard.id}}>改成<Link to={/decks/${flashcard.id}}>，开头补斜杠避免路径拼接错误。
3. 把所有路由统一放到App.js的全局Switch里配置，不要把路由散落在子组件内部：

   <Router>
     <Switch>
       {/* 首页路由，精确匹配根路径 */}
       <Route exact path="/">
         <ShowAllDecks 
           flashcards={flashcards} 
           setFlashcards={setFlashcards} 
           deleteHandler={deleteHandler} 
         />
       </Route>
       {/* 新增详情页动态路由，通过参数匹配不同卡组 */}
       <Route path="/decks/:deckId">
         <ViewDeck 
           flashcards={flashcards} 
           deleteHandler={deleteHandler}
         />
       </Route>
       {/* 404路由放在最后，匹配所有未命中的路径，删掉原来放Router外面的NotFound */}
       <Route>
         <NotFound />
       </Route>
     </Switch>
   </Router>
   

4. 调整ViewDeck组件的取值逻辑：因为组件是被Route直接渲染的，会自动接收到react-router注入的match属性，可以直接从路径参数里取当前要展示的卡组id，再从全局卡组数组里筛选出对应的数据完成渲染，不需要在Route位置硬塞嵌套的flashcard对象：

   function ViewDeck({ flashcards, deleteHandler, match }) {
     // 从路径中提取当前要展示的卡组id
     const targetDeckId = match.params.deckId;
     // 从全局卡组列表里筛选对应的数据
     const currentDeck = flashcards.find(item => item.id === targetDeckId);
     
     // 匹配不到对应卡组时展示404
     if (!currentDeck) return <NotFound />;
     
     return (
       <div className="container">
         <p>{currentDeck.name}</p>
       </div>
     )
   }
   

5. 删掉Deck组件内部多余的Router、Switch、Route包裹结构，只保留卡组卡片本身的UI和跳转Link即可。

额外提醒：你现在在App.js的请求逻辑里，把后端返回的卡组id覆盖成了${index}-${Date.now()}拼接的格式，这个id会在每次组件重新挂载时动态变化，和路径参数做匹配时会出现数据不一致的问题，建议直接使用后端返回的原始数字id作为卡组的唯一标识，不要在前端map时重新拼接生成id。

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