[英]ESLint Parsing error: Unexpected token = with <Router />
当为这样的自定义历史添加参数时,我在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;
尝试改为导入/使用特定的高级浏览器/ DOM路由器,例如BrowserRouter 。 您甚至可以将其别名为Router
或任何您喜欢的名称。 如果您参考Router的文档,则建议使用更高级别的路由器,例如上述的BrowserRouter
。 另外,如果查看Router
文档,您会发现Router
也未从react-router-dom
导入,而是从react-router
导入的,这很可能是发生特定错误的原因。
的好处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;
否则,如果您需要手动创建历史记录或使用较低级别的路由器,请从react-router
导入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;
希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.