在route.js文件中使用JSX错误时,“反应”必须在范围之内

时间:2019-06-12 12:51:34

标签: javascript node.js reactjs

ESlint在显示routes.js文件时向我显示了上述错误。

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

无法找到明确的解决方案。

1 个答案:

答案 0 :(得分:3)

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

import React from 'react';

没有该导入,babel将不会解析您的JSX并将其转换为JavaScript。