React Router点击Link不刷新且路由跳转失效问题求助

核心问题分析 #

1. 首页路径/没有对应的路由规则，导致出现No routes matched location "/"警告
2. 给<Link>加window.location.reload()是错误操作：react-router-dom是单页路由跳转，本就不需要刷新页面，强制刷新会打断路由跳转逻辑，导致地址栏短暂变化后回到原路径

具体修改步骤 #

不需要额外安装包，只需调整路由配置并移除错误的刷新逻辑：

1. 添加根路径路由
   在你的路由配置中，给首页/添加匹配规则。如果有首页组件（比如Home.jsx），导入后添加路由；如果暂时没有，也可以直接显示内容或者重定向：

   import { Route, Routes, Link, Navigate } from "react-router-dom";
   import Stats from "./pages/Stats";
   // 如果有Home组件就导入：import Home from "./pages/Home";
   
   // 页面内容部分
   <div className="pt-5 pl-24">
     <Button orange>
       <Link to="/stats">Start Taking Stats</Link>
     </Button>
   </div>
   
   <Routes>
     {/* 根路径路由：二选一即可 */}
     {/* 方案1：有Home组件时 */}
     {/* <Route path="/" element={<Home />} /> */}
     {/* 方案2：暂时没有Home组件，重定向到stats */}
     <Route path="/" element={<Navigate to="/stats" />} />
     {/* 原有的stats路由 */}
     <Route path="/stats" element={<Stats />} />
   </Routes>
   

2. 移除Link上的刷新逻辑
   删掉<Link>的onClick={() => window.location.reload()}，恢复正常的单页路由跳转：

   <Link to="/stats">Start Taking Stats</Link>
   

验证效果 #

修改后点击按钮，页面会正常跳转到/stats并渲染Stats组件，不会出现路由警告，也不需要刷新页面。

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