React Router跳转页面不渲染：基于news.json的新闻列表路由配置问题

核心问题定位 #

• 路由匹配规则缺失：现有Switch仅硬编码了/new1单条路由规则，当点击跳转new2、new3对应路径时，无匹配规则触发，自然渲染空白内容。
• 路由路径与Link配置不匹配：现有Link直接拼接根路径/${item.id}，但路由配置在News组件内部，会出现路径层级错位：比如News组件本身挂载在/news路径下时，内部子路由默认拼接后全路径为/news/new1，但Link跳转到根路径的/new1，完全无法匹配，导致跳转到空白页面。
• 对“路由加key”的方案适用场景误解：该方案仅针对**同一路由靠动态参数切换（如/news/:id）**的场景——当路径结构一致、仅参数变化时，React Router不会销毁旧组件，导致组件拿不到最新参数、不重新渲染。硬编码固定路径的写法本身不存在参数复用的问题，不需要强行套用该方案。

可直接落地的修改方案 #

方案1：动态路由映射（推荐，无需重复硬编码Route） #

1. 替换原有的硬编码单条Route，改用带参数的动态路由，统一映射所有新闻详情组件：

   // 先将所有已写好的详情组件做路径映射
   const newsDetailMap = {
     new1: New1,
     new2: New2,
     new3: New3
   }
   // 新建统一的详情页容器组件
   const NewsDetail = () => {
     const { newsId } = useParams() // 从路由参数取当前新闻id
     const CurrentDetail = newsDetailMap[newsId]
     if (!CurrentDetail) return <div>未找到对应新闻</div>
     // 这里就是需要加key的位置：用动态id当key，强制组件在id变化时重新挂载
     return <CurrentDetail key={newsId} />
   }
   

   注意：使用useParams前需要先从react-router-dom模块导入该方法。

2. 调整Switch内的路由规则，匹配动态参数路径：

   <Switch>
     {/* 新闻列表匹配/news路径 */}
     <Route exact path="/news" component={NewWrap} />
     {/* 详情页匹配/news下的所有动态id路径 */}
     <Route path="/news/:newsId" component={NewsDetail} />
   </Switch>
   

3. 同步修改Link的跳转路径，和路由规则保持一致：

   <Link to={`/news/${item.id}`} style={{textDecoration:"none", color:"black"}}>
   

方案2：硬编码全量固定路由（适合路由条目少的场景） #

如果坚持不使用动态路由，需要把所有新闻对应的路由规则全部补全，同时保证路径完全对齐：

1. 在Switch里补齐所有新闻的Route规则：

   <Switch>
     <Route path="/new1" component={New1}/>
     <Route path="/new2" component={New2}/>
     <Route path="/new3" component={New3}/>
   </Switch>
   

2. 这种模式下每个路由的path都是完全独立的静态值，不存在参数复用的组件挂载问题，不需要额外加key。
3. 注意：如果Switch写在News组件内部，需要把所有路由规则提取到应用最外层的根路由配置中，避免点击跳转后整个News组件被卸载，导致内部的Switch路由永远无法匹配渲染。

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