ESLint解析错误：意外的令牌=与<Router />

Question

I am getting the following error in my React when I add the param for a custom history like so:

<Router history={history}>

I get this error from ESLint:

[eslint] Parsing error: Unexpected token =
(JSX attribute) history: History<any>

Here is my .eslintrc.js file:

export default {
  parser: 'babel-eslint',
  extends: 'airbnb',
  parserOptions: {
    ecmaVersion: 8,
    ecmaFeatures: {
      jsx: true,
      modules: true,
    },
  },
  env: {
    node: true,
    browser: true,
    jest: true,
    mongo: true,
  },
  rules: {
    'no-unused-vars': [
      'error',
      {
        vars: 'local',
        args: 'none',
      },
    ],
    'react/jsx-filename-extension': 0,
    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: true,
      },
    ],
  },
};

and my package.json file:

  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.3.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.15.0",
    "eslint-plugin-jsx-a11y": "^6.2.0",
    "eslint-plugin-react": "^7.12.4"
  },
  "eslintConfig": {
    "extends": "react-app"
  }

and finally the AppRouter.js file:

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

import Home from '../components/HomePage';
import NotFound from '../components/NotFoundPage';

export const history = createHistory();

const AppRouter = () => (
  <Router history={history}>
    <div>
      <Switch>
        <Route path="/" component={Home} exact={true} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </Router>
);

export default AppRouter;

Answer 1

Try instead importing/using a specific higher-level browser/DOM router such as BrowserRouter . You can even alias it to Router or whatever you prefer. If you refer to the documentation for Router it suggests to use a higher-level router such as the aforementioned BrowserRouter . Also, if you examine the Router documentation you will see that Router is not imported from react-router-dom either, it's imported from react-router , which is likely why the specific error is occurring.

A benefit of BrowserRouter also automatically creates history for you so you wouldn't need to manually createHistory() either:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from '../components/HomePage';
import NotFound from '../components/NotFoundPage';

const AppRouter = () => (
  <Router history={history}>
    <div>
      <Switch>
        <Route path="/" component={Home} exact={true} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </Router>
);

export default AppRouter;

Otherwise, import Router from react-router if you need to manually create history or use the lower level router:

import React from 'react';
import { Router } from 'react-router';
import { Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

import Home from '../components/HomePage';
import NotFound from '../components/NotFoundPage';

export const history = createHistory();

const AppRouter = () => (
  <Router history={history}>
    <div>
      <Switch>
        <Route path="/" component={Home} exact={true} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </Router>
);

export default AppRouter;

Hopefully that helps!