[英]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.