Ошибка синтаксического анализа ESLint: неожиданный токен = с

Question

Я получаю следующую ошибку в своем React при добавлении параметра для пользовательской истории, например, так:

<Router history={history}>

Я получаю эту ошибку от ESLint:

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

Здесьмой файл .eslintrc.js:

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,
      },
    ],
  },
};

и мой файл package.json:

  "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"
  }

и, наконец, файл AppRouter.js:

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

Попробуйте вместо этого импортировать / использовать определенный высокоуровневый браузер / DOM-маршрутизатор, такой как BrowserRouter .Вы даже можете присвоить ему псевдоним Router или что угодно.Если вы обратитесь к документации для Маршрутизатор , она предлагает использовать маршрутизатор более высокого уровня, такой как вышеупомянутый BrowserRouter.Кроме того, если вы изучите документацию Router, то увидите, что Router также не импортируется из react-router-dom, а импортируется из react-router, что, вероятно, объясняет конкретную ошибку.

AПреимущество BrowserRouter также автоматически создает историю для вас, поэтому вам не нужно вручную createHistory():

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;

В противном случае, импортируйте Router из react-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;

Надеюсь, это поможет!