我要使用以下代码来验证专用路由:
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import routes from '../../routing/routes';
export default function PrivateRoute({ component: Component, ...rest }) {
// TODO: user verification
let user = 1;
const authComponentResolver = props => {
const authorizedComponent = <Component {...props} />
const redirectToAuthComponent = <Redirect to={{ pathname: routes.login.path, state: { from: props.location } }} />
if (user !== undefined) {
return authorizedComponent;
} else {
return redirectToAuthComponent;
}
}
return (
<Route {...rest} render={authComponentResolver} />
);
}
但是会引发下一个错误:
./src/components/auth/private-route.js
TypeError: Cannot read property 'forEach' of undefined
我不明白为什么,但是下一个代码可以工作:
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import routes from '../../routing/routes';
export default function PrivateRoute(a) {
// TODO: user verification
let user = 1;
const authComponentResolver = props => {
const authorizedComponent = <a.component {...props} />
const redirectToAuthComponent = <Redirect to={{ pathname: routes.login.path, state: { from: props.location } }} />
if (user !== undefined) {
return authorizedComponent;
} else {
return redirectToAuthComponent;
}
}
return (
<Route {...a} render={authComponentResolver} />
);
}
有人可以解释一下为什么第一版无法编译吗?我认为这两个版本的功能相同。
这是我调用组件的方式:
const DashboardRoutes = () => (
<Switch>
<PrivateRoute exact path={routes.root.path} component={Dashboard} />
<PrivateRoute path={routes.dashboard.path} component={Dashboard} />
<PrivateRoute exact path={routes.persons.path} component={Persons} />
<PrivateRoute path={routes.personsNew.path} component={NewPerson} />
<PrivateRoute exact path={routes.branchOffice.path} component={BranchOffices} />
<PrivateRoute path={routes.personsNew.path} component={NewPerson} />
<PrivateRoute component={Error404} />
</Switch >
);
在控制台中,我出现此错误:
VM911 main.chunk.js:116 Uncaught Error: Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read property 'forEach' of undefined
at Linter.parseResults (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/eslint-loader/dist/Linter.js:121)
at Linter.printOutput (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/eslint-loader/dist/Linter.js:85)
at cache (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/eslint-loader/dist/cacheLoader.js:46)
at Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/loader-fs-cache/index.js:122
at Gunzip.cb (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/loader-fs-cache/index.js:47)
at Gunzip.zlibBufferOnEnd (zlib.js:131)
at Gunzip.emit (events.js:203)
at endReadableNT (_stream_readable.js:1145)
at process._tickCallback (internal/process/next_tick.js:63)
at Object../src/components/auth/private-route.js (VM911 main.chunk.js:116)
at __webpack_require__ (VM909 bundle.js:786)
at fn (VM909 bundle.js:151)
at Module../src/routing/module-router.js (VM911 main.chunk.js:1098)
at __webpack_require__ (VM909 bundle.js:786)
at fn (VM909 bundle.js:151)
at Module../src/routing/router.js (VM911 main.chunk.js:1226)
at __webpack_require__ (VM909 bundle.js:786)
at fn (VM909 bundle.js:151)
at Module../src/index.js (VM911 main.chunk.js:787)
at __webpack_require__ (VM909 bundle.js:786)
at fn (VM909 bundle.js:151)
at Object.0 (VM911 main.chunk.js:2552)
at __webpack_require__ (VM909 bundle.js:786)
at checkDeferredModules (VM909 bundle.js:46)
at Array.webpackJsonpCallback [as push] (VM909 bundle.js:33)
at VM911 main.chunk.js:1
但这是难以理解的:(
谢谢。
答案 0 :(得分:1)
似乎是eslint-loader
的构建错误-请查看this。尝试更新到eslint-loader的最新版本,然后它应该可以工作。如果您查看Linter.js
中的latest version,您会发现parseResults
方法现在在调用if
之前已进行forEach
检查。
答案 1 :(得分:1)
如果您使用的是react-scripts
版的3.1.2
或更高版本的3.0.1
,您可能需要降级到版本3.0.1
,因为它似乎可以正常工作。参见github issue
答案 2 :(得分:1)
我遇到了同样的错误。过得不好,解决了这个问题。
我尝试降级到 react-scripts: 3.0.1,acc。网络上的一些解决方案。没用。
什么对我有用 --> 就我而言,我观察到,Webpack 缩小了我的 public\index.html 文件。
在清除缩小的 index.html 并编写常规的 index.html 后,用于 React。所有的错误/问题都消失了。现在,一切正常。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
我面临的问题:
希望这会有所帮助。我喜欢操作系统社区。 ?
答案 3 :(得分:0)
来自eslint
的{{1}}的此错误,因此我的解决方案已禁用react-scripts
。
eslint
yarn add customize-cra react-app-rewired @babel/plugin-proposal-decorators --dev
中:config-overrides.js
const { override, disableEsLint } = require("customize-cra");
module.exports = override(
disableEsLint()
);
中的脚本:package.json