React Router链接URL变化但需刷新页面问题求助

核心问题：Header组件不在Router上下文内 #

你的Header组件没有被包裹在BrowserRouter（代码中别名Router）内部。react-router-dom的Link组件必须在Router提供的上下文环境中才能正常触发路由切换，否则只会修改URL，不会触发对应组件的重新渲染。

查看你的App.js代码，Router内部仅包含Switch和路由组件，并未渲染Header。需要将Header组件移到Router内部。

修复后的App.js代码 #

import "./App.css"
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import About from "./components/about/About"
import CourseHome from "./components/allcourses/CourseHome"
import Team from "./components/team/Team"
import Contact from "./components/contact/Contact"
import Home from "./components/home/Home"
import SignIn from "./components/login/Login"
import Header from "./components/header/Header" // 导入Header组件

function App() {
  return (
    <>
      <Router>
        <Header /> {/* 将Header放在Router内部，使其处于路由上下文环境中 */}
        <Switch>
          <Route exact path='/' component={Home} />
          <Route exact path='/about' component={About} />
          <Route exact path='/courses' component={CourseHome} />
          <Route exact path='/team' component={Team} />
          <Route exact path='/contact' component={Contact} />
          <Route path="/login" component={SignIn} />
        </Switch>
      </Router>
    </>
  )
}
export default App

其他排查方向 #

若上述修复后问题仍存在，可检查以下几点：

• 版本兼容性：如果使用react-router-dom v6，Switch已被Routes替代，component属性需改为element={<Component />}的形式；v5版本则当前写法有效。
• 事件冲突：Header中ul标签的onClick={() => setClick(false)}可能影响Link的点击事件，可暂时移除该事件测试，或确保Link的点击事件优先级正常。
• 组件导入导出：确认所有路由组件的导入路径、导出方式是否正确，比如CourseHome是否正确对应/courses路径的目标组件。

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