在 routes.js 文件中使用 JSX 错误时，“React”必须在范围内 [重复]答案

【问题标题】：'React' must be in scope when using JSX error in routes.js file [duplicate]在 routes.js 文件中使用 JSX 错误时，“React”必须在范围内 [重复]
【发布时间】：2019-10-26 23:55:01
【问题描述】：

编写routes.js 文件时，ESlint 向我显示上述错误。

module.exports = {
  'env': {
    'browser': true,
    'es6': true
  },
  'extends': ['plugin:react/recommended', 'standard'],
  'globals': {
    'Atomics': 'readonly',
    'SharedArrayBuffer': 'readonly'
  },
  'parser': 'babel-eslint',
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': true
    },
    'ecmaVersion': 2018,
    'sourceType': 'module'
  },
  'plugins': [
    'react'
  ],
  'rules': {
  }
}

我的routes.js

import { Switch, Route } from 'react-router-dom'
import Feed from './pages/Feed'
import Post from './pages/Post'

function Routes () {
  return (
    <Switch> // -> red line
      <Route path="/" component={Feed} /> // -> red line
      <Route path="/post" component={Post} /> // -> red line
    </Switch>
  )
}

export default Routes

找不到此类问题的明确解决方案。

【问题讨论】：

在路由函数返回 jsx 时在 routes.js 中导入 React

标签： javascript node.js reactjs

【解决方案1】：

使用 JSX 时，必须导入 react。将以下内容添加到 routes.js 文件的顶部：

import React from 'react';

没有那个导入，babel 将不知道如何解析你的 JSX 并将其转译成 JavaScript。

【讨论】：

即使文件只是一个路由文件？
@gamofe 是的。 JSX 是 JavaScript 的语法扩展，它不是 ECMA 标准的一部分。因此，您需要一个像 babel 这样的工具（包含在 create-react-app 中），以便在使用 JSX 时将其转换为标准 JavaScript。要让 babel 做到这一点，它需要知道该文件中正在使用 JSX，并且它只有在你导入 React 时才知道。由于您的路由文件使用 JSX，因此必须导入 React。你可以read more on JSX in the docs。