Question

我要使用以下代码来验证专用路由：

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

但这是难以理解的：（

谢谢。

Answer 1

似乎是eslint-loader的构建错误-请查看this。尝试更新到eslint-loader的最新版本，然后它应该可以工作。如果您查看Linter.js中的latest version，您会发现parseResults方法现在在调用if之前已进行forEach检查。

Answer 2

如果您使用的是react-scripts版的3.1.2或更高版本的3.0.1，您可能需要降级到版本3.0.1，因为它似乎可以正常工作。参见github issue

Answer 3

我遇到了同样的错误。过得不好，解决了这个问题。

我尝试降级到 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>

我面临的问题：

代码中的大部分更改都没有反映在开发服务器中。
每次加载开发服务器时都会弹出错误 startWorkingOnPEndingInteractions。
当我使用一个新的 public/index.html 文件重新开始时，所有这些都消失了

希望这会有所帮助。我喜欢操作系统社区。 ?

Answer 4

来自eslint的{{1}}的此错误，因此我的解决方案已禁用react-scripts。

第1步：eslint
第2步：在文件yarn add customize-cra react-app-rewired @babel/plugin-proposal-decorators --dev中：

config-overrides.js

第3步：更新文件const { override, disableEsLint } = require("customize-cra"); module.exports = override( disableEsLint() );中的脚本：

package.json

无法读取React

4 个答案: