Eslint: Errors: no-unused-vars with jsx components

[qmmr]

Eslint thinks that Route, DefaultRoute, RouteHandler and Handler are unused vars, because they're used as React Components in JSX.
My version of eslint v0.18.0

Command: eslint app/

import React from 'react'
import Router from 'react-router'

import App from './App.jsx'
import Main from './Main.jsx'

var Route = Router.Route
var DefaultRoute = Router.DefaultRoute
var RouteHandler = Router.RouteHandler

var routes = (
    <Route name='app' path='/' handler={ App }>
        <Route name='all' path='/' handler={ Main } />
        <Route name='completed' path='/completed' handler={ Main } />
        <Route name='active' path='/active' handler={ Main } />
        <DefaultRoute handler={ Main } />
    </Route>
)

Router.run(routes, function(Handler) {
    React.render(<Handler />, document.querySelector('#container'))
})

Output:

app/index.js
   7:4   error  Route is defined but never used         no-unused-vars
   8:4   error  DefaultRoute is defined but never used  no-unused-vars
   9:4   error  RouteHandler is defined but never used  no-unused-vars
  20:28  error  Handler is defined but never used       no-unused-vars

✖ 4 problems (4 errors, 0 warnings)

My .eslintrc:

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true
  },
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "rules": {
    "eol-last": 2,
    "no-irregular-whitespace": 2,
    "no-mixed-requires": 2,
    "no-multi-spaces": 2,
    "no-underscore-dangle": 0,
    "quotes": [2, "single"],
    "semi": [2, "never"],
    "strict": 0
  }
}

[lo1tuma]

This is the correct behavior. ESLint supports only the JSX syntax not the semantic of react. There is a plugin which implements the semantic of react: eslint-plugin-react.

[qmmr]

Awesome, that's exactly what I was looking for, thx @lo1tuma

[Philip-Nunoo]

Adding the following rule solved my issue:
"react/jsx-uses-vars": [2]