React 18+React Router 6点击菜单页面闪烁，求排查方案

问题根源 #

你使用了原生HTML的<a>标签实现导航，这会触发浏览器默认的页面跳转行为，导致整个应用重新加载，从而出现页面闪烁。React Router作为单页应用路由方案，需要使用其提供的专属导航组件来实现无刷新页面切换。

具体修改步骤 #

1. 导入React Router的Link组件
   在menu.tsx顶部添加导入语句：

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

2. 替换导航标签
   将组件内的<a>标签替换为<Link>，并把href属性改为to属性：

export const Menu = () => {
  return (
    <div>
      {navigation.map((item) => (
        <Link
          key={item.name}
          to={item.href}
          className="text-gray-600 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
        >
          {item.name}
        </Link>
      ))}
    </div>
  )
}

3. 补充路由配置（可选）
   确保你的路由结构包含对应子路由，比如在main.tsx中嵌套路由：

root.render(
  <React.StrictMode>
    <BrowserRouter basename={'/'}>
      <Routes>
        <Route path="/" element={<Shell />}>
          <Route index element={<Dashboard />} /> {/* 默认加载Dashboard */}
          {/* 可添加其他子路由 */}
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
)

修改说明 #

Link组件会拦截浏览器的默认跳转行为，通过React Router的客户端路由机制仅更新页面需要变化的部分，避免全页刷新，彻底消除闪烁问题。

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