Javascript '；反应'；在routes.js文件中使用JSX错误时必须在范围内

在编写

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

从'react router dom'导入{Switch，Route}
从“./pages/Feed”导入提要
从“./pages/Post”导入帖子
功能路由（）{
返回(
//->红线
//->红线
//->红线
)
}
导出默认路由

---

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

使用JSX时，必须导入react。将以下内容添加到

routes.js

文件的顶部：

import React from 'react';

---

如果没有该导入，babel将不知道如何解析JSX并将其转换为JavaScript。

import在routes.js中响应routes函数返回jsxEven，如果该文件只是一个路由文件？@gamofe Yes。JSX是JavaScript的语法扩展，不属于ECMA标准。因此，您需要一个像babel这样的工具（作为

createreact app

的一部分提供），以便随时将JSX转换为标准JavaScript。为了让babel做到这一点，它需要知道该文件中正在使用JSX，并且它只知道如果您导入React。由于路由文件使用JSX，因此必须导入React。你可以。