我的自定义身份验证 react-router 路由有啥问题？

Posted 2023-02-21

【中文标题】我的自定义身份验证 react-router 路由有啥问题？

【英文标题】：What is wrong with my custom authentication react-router route?我的自定义身份验证 react-router 路由有什么问题？

【发布时间】：2018-02-12 03:22:14

【问题描述】：

很遗憾，我无法使用react-router version 4 创建自定义路由。我正在尝试构建一个呈现组件的路由，如果用户已通过身份验证，或者在另一种情况下将用户重定向到登录组件。

我一直使用this documentation page 开始使用。

const ProtectedRoute = (component, ...rest) => (
    <Route ...rest render=props => false
        ? <Component ...props />
        : <Redirect to=pathname: '/login', state: from: props.location/>
    />
);

我正在像这样使用ProtectedRoute：

<ProtectedRoute exact path='/' component=testComponent/>

当我运行它时，我得到以下运行时错误：

Uncaught ReferenceError: __rest is not defined
    at ProtectedRoute (index.tsx:19)
    at ReactCompositeComponent.js:305
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:304)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:236)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:522)

这里有一些关于我正在使用的堆栈的更多信息：

反应 15.6.1 react-router-dom 4.2.2 打字稿 2.5.2

为什么没有定义rest？我的自定义路线有什么问题？

提前谢谢你！

更新（最小示例）

可以在here 中找到该问题的最小示例。要运行该示例，请按以下步骤操作：

使用yarn install 安装依赖项 使用yarn dev 运行开发服务器 转到http://localhost:8080

【问题讨论】：

我的结构和你一样，而且很有效。您能否提供一个简单的回购协议来重现您的问题？在您的代码中，组件拼写存在差异，您传递的是 component 并使用 Component，这可能是导致问题的原因。

@niba 感谢您的评论！我已经更新了我的问题并添加了一个最小的示例。你可以在这里找到它github.com/openscript/***-react-router。

【参考方案1】：

我不是 Typescript 专家，还没有深入研究 TS，但这绝对是与您尝试使用 ...rest 运算符有关的问题。我猜 ts 不喜欢对象解构中的扩展运算符，因此不喜欢以下结构（尽管它在 ES6 中可以正常工作）：

ProtectedRoute = (component: Component, isAuthenticated, ...rest) => 

如果你用path prop 的明确用法重写你的组件，它会恢复正常工作。

const ProtectedRoute = (component: Component, isAuthenticated, path) => 
    return <Route
        path=path
        render=props => isAuthenticated
            ? <Component ...props />
            : <Redirect to=pathname: '/login', state: from: props.location />
    />
; 

但是你的代码不起作用的事实对我来说似乎很奇怪，因为它提到从 2.1 版本开始 typescript 支持对象解构中的传播/休息：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#object-spread-and-rest

【讨论】：

你的方法有效，但我不明白为什么传播运算符没有。

【参考方案2】：

好的，我知道发生了什么。在您的tsconfig.json 中，您声明了这条规则"noEmitHelpers": true，它告诉打字稿编译器不要在您的输出中包含任何像__rest 这样的辅助函数。这就是为什么__rest is not defined 出现运行时错误的原因。将其更改为 false 应该可以解决您的问题。

【讨论】：

非常感谢！这样就解决了问题！