React Router路由导航需手动刷新页面问题的修复方案咨询

你的问题核心是路由路径大小写不匹配：

• 在App.js中，路由路径使用的是大写开头（比如/Business、/Entertainment）
• 但在NavBar.js的Link组件中，跳转路径是小写开头（比如/business、/entertainment）

React Router的路径匹配严格区分大小写，点击导航链接后URL更新为小写路径，但没有对应的路由规则匹配，因此组件不会自动渲染；只有手动刷新时（若服务器配置了忽略大小写的路径映射）才能匹配到对应组件。

修复方案 #

统一所有路由路径的大小写（推荐全部使用小写，符合URL常规规范），修改App.js中的路由路径：

// App.js 修改后的路由部分
<Switch>
  <Route exact path="/">
    <News key="general" pageSize='15' country='us' category='general' />
  </Route>
  <Route exact path="/business">
    <News key="business" pageSize='15' country='us' category='business' />
  </Route>
  <Route exact path="/entertainment">
    <News key="entertainment" pageSize='15' country='us' category='entertainment' />
  </Route>
  <Route exact path="/health">
    <News key="health" pageSize='15' country='us' category='health' />
  </Route>
  <Route exact path="/science">
    <News key="science" pageSize='15' country='us' category='science' />
  </Route>
  <Route exact path="/sports">
    <News key="sports" pageSize='15' country='us' category='sports' />
  </Route>
  <Route exact path="/technology">
    <News key="technology" pageSize='15' country='us' category='technology' />
  </Route>
</Switch>

额外检查点 #

若修改后问题仍存在，可排查以下内容：

• 确认react-router-dom版本适配（你当前使用的是v5版本的Switch，确保项目依赖版本无冲突）
• 检查News组件是否依赖路由参数，是否需要在路由变化时重新触发数据请求（比如在componentDidUpdate中监听props.match变化，或用useEffect监听路由参数）
• 排查是否有全局事件、第三方库干扰了React Router的客户端导航逻辑

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