React Router V6路由失效显示空白页，伴hooks/useRef使用错误

核心问题分析 #

你遇到的页面空白+invalid use of hooks / useref错误，根源是用了原生<a>标签跳转路由——原生a标签会触发整页刷新，直接破坏React Router的单页应用机制，导致React组件重新初始化时出现hooks异常，同时引发页面渲染空白。

具体修复步骤 #

1. 修改App.tsx的导航组件 #

把原生a标签替换成React Router提供的Link组件，避免页面刷新：

import React from "react";
// 新增导入Link组件
import { Link } from "react-router-dom";

const App = () =>{   
  return(
    <div>
      <h1>Welcome Home</h1>
      <nav>
        {/* 替换a标签为Link */}
        <Link to="/email">Email</Link>
        <Link to="/contact">Contact</Link>
      </nav>
    </div>
  );
}

export default App;

2. 版本一致性检查 #

你描述里提到用了react-dom@18.0.6，但package.json里实际是react-dom@18.2.0，虽然这个版本差异不会直接导致当前问题，但建议保持react和react-dom版本完全一致（都用18.2.0），避免潜在兼容性问题。

3. 验证组件导入路径 #

确认EmailPage和ContactPage的导入路径正确：你的代码里从./route-components/Email导入，确保route-components文件夹下确实有Email.tsx和Contact.tsx文件。

修复后效果 #

修改完成后，点击导航链接时会通过React Router的客户端路由跳转，不会刷新页面，页面能正常渲染对应组件，hooks相关错误也会消失。

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