React-Router点击链接URL变更但页面未加载的问题求助

问题原因 #

你的Header组件中大概率使用了原生<a>标签实现导航，原生<a>会触发浏览器URL跳转，但不会通知React Router进行路由匹配和组件渲染，只有手动刷新页面时，浏览器重新加载应用，React Router才会根据当前URL匹配对应的路由组件。

解决方案 #

步骤1：在Header组件中导入React Router的<Link>组件 #

打开Header.jsx（或对应文件名），导入Link：

import { Link } from 'react-router-dom';

步骤2：替换原生<a>标签为<Link> #

将Header中原来的导航链接从原生<a>替换为<Link>，示例：

// 替换前
<a href="/">首页</a>
<a href="/about">关于</a>

// 替换后
<Link to="/">首页</Link>
<Link to="/about">关于</Link>

额外说明 #

你的App组件中的路由配置已经正确：

• 使用BrowserRouter包裹了整个应用
• Switch组件确保只匹配第一个符合条件的路由
• 每个Route都添加了exact属性避免路由模糊匹配

<Link>组件会拦截点击事件，仅修改URL而不触发整页刷新，同时通知React Router根据新URL匹配对应的路由组件，实现页面的无刷新渲染。

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