React Router v6渲染空白页面及无效Hook调用报错求助

先排查警告的核心原因 #

控制台抛出的Invalid hook call警告，对应三个核心问题，逐一排查：

1. 检查React与React DOM版本是否匹配 #

执行命令查看当前安装的版本：

# npm用户
npm list react react-dom

# yarn用户
yarn list react react-dom

确保两者大版本完全一致（比如都是18.2.0或17.0.2），版本不匹配会直接导致Hook调用异常。如果版本不一致，重新安装对应版本：

# 安装匹配的18.x版本示例
npm install react@^18.2.0 react-dom@^18.2.0

2. 检查是否存在多个React副本 #

项目依赖中如果存在多个React实例，也会触发该警告。执行命令查看依赖树：

npm ls react

若输出显示多个版本的React，执行依赖合并命令：

# npm用户
npm dedupe

# yarn用户
yarn dedupe

也可以直接删除node_modules和package-lock.json（或yarn.lock）后，重新执行npm install/yarn install。

3. 确认没有违反Hook规则 #

当前你的代码还未使用路由相关Hook，但后续添加时需注意：

• 所有Hook（如useNavigate、useParams）必须在函数组件的顶层作用域调用，不能放在条件判断、循环、嵌套函数内。
• 类组件中无法使用Hook，若需用路由功能需改为函数组件。

修复页面空白问题 #

你的代码目前仅套了BrowserRouter，但未配置具体路由规则，所以页面显示默认App内容。要让路由生效，需在App组件中添加Routes和Route组件，示例修改如下：

// App.jsx
import logo from './logo.svg';
import './App.css';
import { Routes, Route } from 'react-router-dom';

// 自定义页面组件
function Home() {
  return <h2>首页</h2>;
}

function About() {
  return <h2>关于页</h2>;
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>React Router v6 示例</p>
      </header>
      {/* 路由配置核心部分 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

修改后重启项目，访问/和/about即可看到对应页面内容。

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