使用JSX出现react/react-in-jsx-scope报错：React must be in scope

react/react-in-jsx-scope是ESLint针对React代码抛出的规则校验错误，触发原因分两种场景：

1. 项目使用React 17以下版本：JSX编译后会转换为React.createElement()调用，所有写了JSX的文件必须在顶部显式导入React，否则编译时找不到React对象直接报错。你贴出的代码里只导入了react-router-dom的相关方法，没有导入React，直接触发了这个校验。
2. 项目使用React 17及以上版本：React 17推出了新的JSX转换机制，不需要手动导入React就能写JSX，但如果ESLint没有同步更新配置，依旧会按照旧规则强制要求导入React，也会抛出这个错误。

另外你贴的代码还有两个潜在问题：一是使用了Navbar组件但没有对应导入，二是React Router v6的Route组件必须通过element属性传入要渲染的组件，当前写法路由匹配后不会渲染任何内容，后续运行也会出问题。

根据项目使用的React版本选择对应方案即可：

• 方案一：React 17+版本（推荐）
  直接修改ESLint配置，关闭过时的导入校验规则。找到项目的ESLint配置文件（.eslintrc/.eslintrc.js/package.json里的eslintConfig字段），添加如下规则：

  {
    "rules": {
      "react/react-in-jsx-scope": "off"
    }
  }
  

  配置生效后不需要在每个文件里手动导入React，只需要补上缺失的Navbar组件导入、给Route补充element属性即可。

• 方案二：兼容React 16及以下旧版本
  在使用JSX的文件顶部补上React的导入语句，修复后的参考代码如下：

  // 补全React导入
  import React from 'react';
  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  // 替换为你项目中Navbar组件的实际路径
  import Navbar from './components/Navbar';
  // 替换为你路由对应的实际页面组件
  import Home from './pages/Home';
  
  function App() {
    return (
      <Router>
        <Navbar />
        <Routes>
          {/* React Router v6 默认就是精确匹配，可省略exact属性，必须传入element属性指定渲染组件 */}
          <Route path="/" element={<Home />} />
        </Routes>
      </Router>
    );
  }
  
  export default App;
  

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